swiper.js - 페이징 커스텀

swiper.js는 페이징 커스텀이 가능하다.

아래와 같이 작업

 

* html

<div class="swiper myswiper">
    <div class="swiper-wrapper">
        <div class="swiper-slide">1</div>
        <div class="swiper-slide">2</div>
        <div class="swiper-slide">3</div>
    </div>
    <div class="swiper-pagination"></div>            
</div>

 

 

 

* script

<script>
    var bullet = [ ['bullet01', 'text1'],
                   ['bullet02', 'text2'],
                   ['bullet03', 'text3']];
    
    
    var swiper = new Swiper(".myswiper", {
        pagination: {
            el: ".swiper-pagination",
            renderBullet: function (index, className) {
                return '<div class="' + className + ' ' + bullet[index][0] + '"><span>' + bullet[index][1] + '</span></div>';
            }
        },
        loop: true,
        effect: 'fade',
        allowTouchMove: false,
        autoplay: {
            delay: 5000,
        },
    });
</script>