엘레멘토 슬라이더 네비게이션 만들기

#elementor #slider #imageCarousel #navigation #wordpress

적용예시

컨테이터 추가 버튼 클릭

2개의 컨테이너를 가로로 생성 > 좌측엔 슬라이드 (이미지 크로셀, 슬라이드 등 슬라이드 기능을 가진 위젯 모두가능) 위젯 추가(저는 이미지 크로셀 위젯 추가했습니다.) > 우측에는 네비게이션용으로 위젯 추가 (저는 텍스트 위젯을 추가했습니다.)

이미지 캐러셀 > 고급 > CSS 클래스에 “myslider” 추가

1번째 네비게이션 위젯 > 고급 > CSS ID = slide0 > CSS 클래스 = slide_nav active

2번째 네비게이션 위젯 > 고급 > CSS ID = slide1 > CSS 클래스 = slide_nav

3번째 네비게이션 위젯 > 고급 > CSS ID = slide2 > CSS 클래스 = slide_nav

대시보드 > 엘리멘터 > Custom Code > 새 Custom Code 추가 버튼 클릭

“elementor slider navigation” 제목 입력 > Location “</body> – End” 로 변경 > 하기 코드 입력 > 공개 버튼 클릭

<script>
    jQuery(window).on('load', 
    function () {
const swiper_target = jQuery ( '.myslider .swiper' );
const swiperInstance = swiper_target.data('swiper');

for (let i = 0; i <= 99; i++) {
  jQuery("#slide" + i).hover(function() {
    swiperInstance.slideTo(i + 1);
  });
}
  
  if (swiperInstance != undefined) {
    swiperInstance.on("slideChange", function () {
      var slide = String(swiperInstance.realIndex);
      jQuery(".slide_nav").removeClass("active");
      jQuery("#slide" + slide).addClass("active");
    });
  }
});

</script>


<style>
.slide_nav {
  cursor: pointer;
}

.slide_nav.active {
border: 1px solid #555555;
  border-radius: 6px;
}
	
</style>