elementor slider 네비게이션 만들기 js

하기 자바스크립트를 넣기위해선 위 플러그인 필수

#자바스크립트 #js #java

관련 유투브

jQuery(window).load(function () {
  const imageCarousel = jQuery(".myslider .swiper-container"),
    swiperInstance = imageCarousel.data("swiper");


jQuery("#slide0").click(function () {
    swiperInstance.slideTo(0);
  });
  jQuery("#slide1").click(function () {
    swiperInstance.slideTo(1);
  });
  jQuery("#slide2").click(function () {
    swiperInstance.slideTo(2);
  });
  jQuery("#slide3").click(function () {
    swiperInstance.slideTo(3);
  });
    jQuery("#slide4").click(function () {
    swiperInstance.slideTo(4);
  });
  
  if (swiperInstance != undefined) {
    swiperInstance.on("slideChange", function () {
      var slide = String(swiperInstance.realIndex);
      jQuery(".slide_nav").removeClass("active");
      jQuery("#slide" + slide).addClass("active");
    });
  }
});

첫 네비게이션 (아이콘 목록, 제목, 아이콘 등 뭐든 상관없음)

CSS ID : slide0

CSS 클래스 : slide_nav active

두번째 네비게이션 부터

CSS ID : slide1

slide1, slide2, slide3~~~~

위 코드에서는 slide4까지 지정되어 있으니 코드를 수정해서 사용하면 됨

CSS 클래스 : slide_nav

그리고 슬라이더로 지정할 슬라이더 또는 섹션

CSS 클래스 : myslider

.slide_nav {
  cursor: pointer;
}
/* 마우스 클릭시 css */ 
.slide_nav.active {
border: 1px solid #555555;
  border-radius: 6px;
}

/* 마우스 클릭 후 액티브된 상태 css */ 
.slide_nav.active.elementor-widget-icon-list .elementor-icon-list-text{color: #fff;}