var galleryTop = new Swiper('.gallery-top', {
pagination: { //페이징 사용자 설정
el: ".pagination_bullet", //페이징 태그 클래스 설정
type : 'bullets',
// Bullet Numbering 설정
renderBullet: function (index, className) {
return '<span class="' + className + '">' + (index + 1) + "</span>";
},
}
});
Swiper 슬라이더를 동작시키기 위해서는 JavaScript에서 Swiper를 초기화하고 필요한 기능에 대해서는 Swiper 메서드 옵션을 사용해야 합니다.
여기까지 작업을 완료하면 Main Swiper 와 Thumbnail Swiper 연동되지 않고 각각 동작하는 것을 확인할 수 있습니다.
사용해야 할 Swiper 옵션설명 및 사용방법은 아래와 같습니다.
✔spaceBetween:슬라이드 간격 설정
✔pagination: 페이징 사용자 설정(type : bullets, fraction, progressbar)
✔loop:슬라이드 반복 여부 설정
✔loopedSlides: loop 값이 true 일 경우 파라미터 duplicate 개수 설정
✔navigation:네비게이션 사용자 설정(이전, 다음 버튼 설정)
✔slidesPerView:한번에 보여지는 슬라이드 개수 설정
✔centeredSlides:슬라이드 중앙 배치 여부 설정
✔touchRatio:드래그 비율 설정(기본값: 1, 값을 0으로 변경할 경우 드래그 불가능)
✔slideToClickedSlide: 슬라이드가 여러개 나열되어 있을 경우, 클릭시 해당 슬라이드 위치로 이동 여부 설정
<script>
var swiperTopNum = $('.gallery-top').find('.swiper-slide');
var swiperSubNum = $('.gallery-thumbs').find('.gallery-thumbs');
var galleryTop = new Swiper('.gallery-top', {
spaceBetween: 10, //슬라이드 간격
pagination: { //페이징 사용자 설정
el: ".swiper-pagination", //페이징 태그 클래스 설정
clickable: true, //버튼 클릭 여부
type : 'bullets', //페이징 타입 설정(종류: bullets, fraction, progressbar)
// Bullet Numbering 설정
renderBullet: function (index, className) {
return '<span class="' + className + '">' + (index + 1) + "</span>";
},
},
loop: true, //슬라이드 반복
loopedSlides: swiperTopNum.length //loop 시 파라미터 duplicate 개수 - 정적으로 숫자 4 표현 가능
});
var galleryThumbs = new Swiper('.gallery-thumbs', {
spaceBetween: 0, //슬라이드 간격
navigation: { //네비게이션 사용자 설정
nextEl: '.swiper-button-next', //다음 버튼 클래스 설정
prevEl: '.swiper-button-prev', //이전 버튼 클래스 설정
},
centeredSlides: true, //슬라이드 중앙 배치
slidesPerView: 'auto', //한번에 보여지는 슬라이드 개수(auto 가능)
touchRatio: 0.2, //드래그 비율 설정(기본값: 1, 기본값을 0으로 설정할 경우 드래그 불가능)
slideToClickedSlide: true, //슬라이드가 여러개 나열되어 있을 경우, 클릭 시 해당 슬라이드 위치로 이동
loop: true, //슬라이드 반복
loopedSlides: swiperSubNum.length //loop 시 파라미터 duplicate 개수 - 정적으로 숫자 4 표현 가능
});
</script>
Swiper API - controller
각각 동작하는 Main Swiper 와 Thumbnail Swiper를 서로 연동하여 제어하려면, 어떻게 해야 할까요?
Main Swiper는 Thumbnail Swiper에 연결하고, Thumbnail Swiper는 Main Swiper에 연결하고 제어해야 합니다.
이를 위해서 Swiper의 controller 모듈의 control의 파라미터 옵션을 사용한다면 Main Swiper 와 Thumbnail Swiper를 연결하여 제어할 수 있습니다.
JavaScript와 Swiper API의 controller를 결합한 스크립트 전체 코드는 아래와 같습니다.
var swiperTopNum = $('.gallery-top').find('.swiper-slide');
var swiperSubNum = $('.gallery-thumbs').find('.gallery-thumbs');
var galleryTop = new Swiper('.gallery-top', {
spaceBetween: 10, //슬라이드 간격
pagination: { //페이징 사용자 설정
el: ".swiper-pagination", //페이징 태그 클래스 설정
clickable: true, //버튼 클릭 여부
type : 'bullets', //페이징 타입 설정(종류: bullets, fraction, progressbar)
// Bullet Numbering 설정
renderBullet: function (index, className) {
return '<span class="' + className + '">' + (index + 1) + "</span>";
},
},
loop: true, //슬라이드 반복
loopedSlides: swiperTopNum.length //loop 시 파라미터 duplicate 개수 - 정적으로 숫자 4 표현 가능
});
var galleryThumbs = new Swiper('.gallery-thumbs', {
spaceBetween: 0, //슬라이드 간격
navigation: { //네비게이션 사용자 설정
nextEl: '.swiper-button-next', //다음 버튼 클래스 설정
prevEl: '.swiper-button-prev', //이전 버튼 클래스 설정
},
centeredSlides: true, //슬라이드 중앙 배치
slidesPerView: 'auto', //한번에 보여지는 슬라이드 개수(auto 가능)
touchRatio: 0.2, //드래그 비율 설정(기본값: 1, 기본값을 0으로 설정할 경우 드래그 불가능)
slideToClickedSlide: true, //슬라이드가 여러개 나열되어 있을 경우, 클릭 시 해당 슬라이드 위치로 이동
loop: true, //슬라이드 반복
loopedSlides: swiperSubNum.length //loop 시 파라미터 duplicate 개수 - 정적으로 숫자 4 표현 가능
});
//Main Swiper와 Thumbnail Swiper가 연동제어 서로를 제어
galleryTop.controller.control = galleryThumbs;
galleryThumbs.controller.control = galleryTop;
Swiper 구현 화면 및 예제 다운로드
위에 'Swiper 슬라이더를 2개로 연동 및 제어하기' 설명에 대한 실제 구현한 화면과 포스팅한 예제를 만들어 다운로드 받아서 공부하실 수 있도록 하였습니다.
다운로드 예제는 구현된 화면은 같으나 Swiper 옵션인 loopedslides 적용한 방법과 적용하지 않은 방법 2개로 만들었습니다.
swiper.css 에서 .gallery-thumbs 클래스 내용중 overflow: hidden; 속성을 주석처리 하고 보시면,
Swiper 옵션인 loopedslide 에 대해서 위에서 설명드렸지만 적용된 여부의 차이점을 확인하실 수 있으리라 생각됩니다.