티스토리 뷰

스와이퍼 슬라이드 페이지네이션 커스텀

var pagingText = ['1', '2', '3'];
var seasonSlide = new Swiper('.js_season_slide', {
    slidesPerView: '1',
    loop: true,
    loopAdditionalSlides: 1,
    centeredSlides: true,
    speed: 1000,
    autoplay: {
        delay: 4000,
        disableOnInteraction: true,
		pauseOnMouseEnter: true,
    },
    navigation: {
        prevEl : '.js_btn_prev',
        nextEl : '.js_btn_next',
    },
    pagination: {
        el: '.js_season_slide_tab',
        clickable: true,
        bulletClass: 'custom_bullet',
        bulletActiveClass: 'custom_bullet_active',
        renderBullet: function(index, className){
            return '<a href="#n" class="' + className + '"><span>Level<br />' + (pagingText[index]) + '</span></a>'
        },
    },
})

 

 

*참고

https://haagenmoa.tistory.com/37

 

[Swiper.js] 마크업 및 속성

swiper See the Pen Untitled by jominh (@thatBamm) on CodePen.

haagenmoa.tistory.com

 

공지사항