[Swiper] thumbs gallery, 썸네일 갤러리

cdn :

- https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.4.6/css/swiper.css

- https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.4.6/js/swiper.min.js

1) loop모드 gallery

- > 예시 소스 코드  https://github.com/nolimits4web/Swiper/blob/master/demos/310-thumbs-gallery-loop.html

· gallery-top(확대 이미지)와 gallery-thumbs(썸네일), 두 가지 슬라이드 컨테이너 html을 생성해야함

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,

},

});

jsfiddle -  https://jsfiddle.net/jywoo/nt15wxd3/28/

2) 기본모드

-> 예시 소스 코드 https://github.com/nolimits4web/Swiper/blob/master/demos/300-thumbs-gallery.html

· gallery-top(확대 이미지)와 gallery-thumbs(썸네일), 두 가지 슬라이드 컨테이너 html을 생성해야함

 

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 } });

jsfiddle -  https://jsfiddle.net/jywoo/98wm2a4y/1/

3) loop모드 gallery - 단, next, prev버튼 클릭시 개당 이동이 아닌 정해진 갯수로 loop

· gallery-top(확대 이미지)와 gallery-thumbs(썸네일), 두 가지 슬라이드 컨테이너 html을 생성해야함

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

jsfiddle -  https://jsfiddle.net/jywoo/u2qhz1yg/17/

참고 예시 Thumbs Gallery With Two-way control  https://codepen.io/hagiang1305/pen/apxvEZ