Swiper bullets

by jenkinstudio

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/css/swiper.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/js/swiper.min.js"></script>

    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide">Item One Title</div>
            <div class="swiper-slide">Item Two Title</div>
            <div class="swiper-slide">Item Three Title</div>
            <div class="swiper-slide">Item Four Title</div>
            <div class="swiper-slide">Item Five Title</div>
        </div>     
         <div class="swiper-pagination"></div>
    </div>

CSS

.swiper-container { height: 300px; }
.swiper-pagination { bottom: 0;}
.swiper-pagination-bullet { width: auto; height: 30px; border-radius: 0; color: #fff; line-height: 30px; padding: 0 5px; background: #666666; opacity: 1; }
.swiper-pagination-bullet-active { color: #fff; background: #007aff;}

JavaScript

jQuery(document).ready(function () {
    var swiper = new Swiper('.swiper-container', {
        pagination: '.swiper-pagination',
        paginationClickable: true,
        paginationBulletRender: function (swiper, index, className) {
            var index;
            var a = ['Item One', 'Item Two', 'Item Three', 'Item Four', 'Item Five'];
            for (index = 0; index < a.length; ++index) {
                return '<span class="' + className + '">' + (a[index]) + '</span>';
            }
        }
    });

});