엘리멘터 프로로 부드럽게 무한 회전하는 이미지 캐러셀 만들기

워드프레스 인기 페이지 빌더인 엘리멘터(Elementor)에서는 이미지 캐러셀(회전 슬라이드) 위젯이 제공됩니다. 이미지 캐러셀을 무한 반복하도록 설정이 가능하지만, 중간에 끊기는 느낌이 날 것입니다. 그런 경우 아래의 방법을 참고하여 부드럽게 무한 반복되는 이미지 캐러셀을 만들 수 있습니다.

엘리멘터 프로(Elementor Pro)로 부드럽게 무한 회전하는 이미지 캐러셀 만들기

엘리멘터에서 이미지 캐러셀을 만드는 기본적인 방법은 다음 글을 참고할 수 있습니다.

이미지 캐러셀이 무한 반복되도록 하려면 내용 (Content) » 추가 옵션 (Additional Options)에서 다음 그림과 비슷하게 설정합니다.

엘리멘터 프로(Elementor Pro)로 부드럽게 무한 회전하는 이미지 캐러셀 만들기

설정을 정리해보면 다음과 같습니다.

  • 자동 재생 (Autoplay): 예 (Yes)
  • 허버 시 일시 정지 (Pause on Hover): 아니오 (No)
  • 자동 재생 속도 (Autoplay Speed): 0
  • 무한 반복 (Infinite Loop): 예 (Yes)
  • 애니메이션 속도 (Animation Speed): 5000 (적절히 조절)
  • 방향 (Direction) : 왼쪽 (Left) 또는 오른쪽 (Right)

방향오른쪽으로 지정하면 왼쪽에서 오른쪽으로 회전(정방향)하고, 방향왼쪽으로 설정하면 오른쪽으로 왼쪽으로, 즉 역방향으로 회전하게 됩니다.

위와 같이 설정하면 이미지 캐러셀이 무한 회전하지만 하나씩 끊기는 느낌이 날 것입니다. 부드럽게 이미지 회전 슬라이드가 돌아가도록 엘리멘터 프로(Elementor Pro)에서 커스텀 CSS를 추가할 수 있습니다. 고급 (Advanced) » 사용자 정의 CSS (Custom CSS)에 아래 그림과 같이 사용자 지정 CSS를 추가합니다.

엘리멘터 프로 - 커스텀 CSS

다음 CSS 코드를 복사하여 붙여넣을 수 있습니다.

selector .swiper-wrapper{
  -webkit-transition-timing-function: linear !important;
  transition-timing-function: linear !important; 
}

업데이트 버튼을 클릭하여 커스텀 CSS를 저장한 다음, 테스트해보면 이미지 캐러셀이 부드럽게 무한 회전하는 것을 확인할 수 있습니다.

참고로 엘리멘터는 슬라이더 라이브러리를 기존의 Slick Slider에서 Swiper Slider로 변경했습니다.

Elementor Pro가 아닌 무료 엘리멘터 버전을 사용하는 경우에는 이미지 캐러셀 엘리멘트에 CSS 클래스를 지정한 후에 적절한 CSS 코드를 외모 » 사용자 정의하기 » 추가 CSS에 추가하여 테스트해보시기 바랍니다.

위의 과정을 다음 유튜브 영상을 통해 확인해보시기 바랍니다. 언어가 영어이지만 과정을 대략적으로 이해할 수 있을 것입니다.

마치며

이상으로 엘리멘터로 부드럽게 무한 반복되는 이미지 캐러셀(회전 슬라이드)을 만드는 방법에 대하여 살펴보았습니다.

엘리멘터와 같은 페이지 빌더를 사용하면 코딩 지식이 부족해도 쉽게 사이트를 만들 수 있다는 장점이 있습니다. 하지만 페이지 빌더는 자체적으로 무겁기 때문에 사이트 속도에 영향을 줄 수 있습니다.

엘리멘터가 그나마 페이지 빌더 중에서는 사이트 속도에 덜 영향을 미치는 것으로 평가되고 있지만, 영향을 미치는 것은 어쩔 수 없는 것 같습니다. 사이트 속도가 느려서 고민인 경우 캐시 플러그인과 최적화 플러그인으로 사이트 최적화를 실시하고, 플러그인 개수를 최소화하면 사이트 속도 개선에 도움이 될 수 있습니다.

참고

일부 글에 제휴 링크가 포함될 수 있으며 파트너스 활동으로 일정액의 수수료를 받을 수 있습니다.

댓글 남기기

* 이메일 주소는 공개되지 않습니다.