//オプション詳細
let thumbsOption = {
spaceBetween: 10,
slidesPerView: 'auto',
loop: true,
loopedSlides: 5,
freeMode: true,
slideToClickedSlide:true,//サムネイルクリックで移動する
watchSlidesVisibility: true,
watchSlidesProgress: true,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
}
let galleryOption = {
spaceBetween: 10,
slidesPerView: 1,
loop: true,
loopedSlides: 5,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
pagination: {
el: '.swiper-pagination',
type: 'bullets',
clickable: true,
},
scrollbar: {
el: '.swiper-scrollbar',
draggable: true,
},
}
/*　メイン・サムネイル別々に設定　*/
var galleryThumbs  = new Swiper('#gallery-thumbs', thumbsOption);
var gallerySwipe  = new Swiper('#gallery-top', galleryOption);
/*　コントローラーで連動   */
galleryThumbs.controller.control = gallerySwipe;
gallerySwipe.controller.control = galleryThumbs;