티스토리 뷰
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;
});
}
'WebPublisher > JavaScript & jQuery' 카테고리의 다른 글
[jQuery] navigation position sticky scroll event (0) | 2024.08.29 |
---|---|
[js] 각 section에 스크롤 진입 시 .active 클래스명 삽입 scroll 감지 event (0) | 2024.08.29 |
[jQuery] 제이쿼리 CDN (0) | 2024.05.17 |
[JavaScript] SweetAlert2가 safari에서 제대로 보이지 않을 때 (0) | 2024.05.17 |
[swiper] 스와이퍼 CDN (0) | 2024.05.10 |
공지사항