thumb swiper 썸네일 스와이퍼 , 스와이퍼 연동

1.loop 모드

var galleryThumbs = new Swiper('.gallery-thumbs', {
        spaceBetween: 10,  
        slidesPerView: 4,  
        loop: true,  
        freeMode: true,  
        loopedSlides: 5, //looped slides should be the same  
        watchSlidesVisibility: true,  
        watchSlidesProgress: true,  
    });
    var galleryTop = new Swiper('.gallery-top', {  
        spaceBetween: 10,  
        loop:true,  
        loopedSlides: 5, //looped slides should be the same  
        navigation: {  
          nextEl: '.swiper-button-next',  
          prevEl: '.swiper-button-prev',  
        },  
        thumbs: {  
          swiper: galleryThumbs,  
        },  
     });

2.기본 모드

var galleryThumbs = new Swiper('.gallery-thumbs', {
        spaceBetween: 10,  
        slidesPerView: 4,  
        freeMode: true,  
        watchSlidesVisibility: true,  
        watchSlidesProgress: true,  
  });
  
  var galleryTop = new Swiper('.gallery-top', {  
        spaceBetween: 10,  
        navigation: {  
          nextEl: '.swiper-button-next',  
          prevEl: '.swiper-button-prev',  
        },  
        thumbs: {  
          swiper: galleryThumbs  
        }  
  });

3.썸넬과 연결된 loop모드 (썸넬클릭시 이동)

 var galleryThumbs = new Swiper('.gallery-thumbs', {
        spaceBetween: 10,
        slidesPerView: 'auto',
        touchRatio: 0.2,
        slideToClickedSlide: true,
        loop: true,
        loopedSlides: 2
    });
    var galleryTop = new Swiper('.gallery-top', {
        spaceBetween: 10,
        navigation: {
          nextEl: '.swiper-button-next2',
          prevEl: '.swiper-button-prev2',
        },
        loop: true,
        loopedSlides: 2
    });
    galleryTop.controller.control = galleryThumbs;
    galleryThumbs.controller.control = galleryTop;

내가 사용한 코드

  var productThumbsSwiper = new Swiper(".product_thumbs_carousel .product_thumbs_swiper", {
    spaceBetween: 6,
    slidesPerView: 4.15,
    slideToClickedSlide: true,
  });

  var productSwiper = new Swiper(".product_carousel .product_swiper", {
    effect: 'fade',
    thumbs: {
      swiper: productThumbsSwiper
    }
  });

  productSwiper.controller.control = productThumbsSwiper;