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