WebPublisher/JavaScript & jQuery
[swiper] 스와이퍼 슬라이드 option
amanda
2024. 5. 20. 15:10
swiper 속성 정리
function eventSwiper(){
var eventSwiper = new Swiper('.event_swiper',{
slidesPerView : '2', // 노출되는 slide 개수
spaceBetween : 10, // 간격
loop:true, // 반복여부
loopAdditionalSlides : 1,
direction: 'vertical', // slide 방향
autoHeight : true, // 높이 자동 조절
centeredSlides: true,
centeredSlidesBounds: true,
speed: 2500,
grabCursor: true,
autoplay: {
delay: 5000,
disableOnInteraction: false,
pauseOnMouseEnter: true,
},
navigation : {
prevEl : '.btn_prev', // prev
nextEl : '.btn_next', // next
},
pagination: {
el: ".swiper_bullet",
type : 'bullets',
clickable: true,
//bullets에 숫자 넣기
renderBullet: function (index, className) {
return '<span class="' + className + '">' + (index + 1) + "</span>";
},
},
breakpoints:{
768: {
slidesPerView : '3', // 768 이상일 때 slide 개수
spaceBetween: 20,
},
},
});
// swiper play & pause button
var num = 0;
$('.pause').on('click', function(){
if(num == 0){
$('.pause').addClass('on').text('STOP');
mainSlide.autoplay.stop();
num = 1;
}else{
$('.pause').removeClass('on').text('PLAY');
mainSlide.autoplay.start();
num = 0;
}
return false;
});
}