修改Swiper 底部默认小点样式为任意字符串

首先引入插件：

swiper.css与swiper.js ，地址下载Swiper - Swiper3|Swiper中文网

css样式代码：

html,
            body {
                background: #efefef;
                position: relative;
                height: 100%;
            }


            body {
                background: #eee;
                font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
                font-size: 14px;
                color: #000;
                margin: 0;
                padding: 0;
            }

            .swiper-container {
                width: 100%;
                height: 100%;
            }

            .swiper-slide {
                text-align: center;
                font-size: 18px;
                background: #fff;

                /* Center slide text vertically */
                display: -webkit-box;
                display: -ms-flexbox;
                display: -webkit-flex;
                display: flex;
                -webkit-box-pack: center;
                -ms-flex-pack: center;
                -webkit-justify-content: center;
                justify-content: center;
                -webkit-box-align: center;
                -ms-flex-align: center;
                -webkit-align-items: center;
                align-items: center;
            }

            span.swiper-pagination-bullet.swiper-pagination-bullet-active {
                width: 14.27%;
                height: 40px;
                border-radius: 0px;
                text-align: center;
                /* line-height: 25px; */
                background: green;
                color: white;
            }

            span.swiper-pagination-bullet {
                width: 14.27%;
                height: 40px;
                border-radius: 0px;
                text-align: center;
                line-height: 40px;
                color: green;
                opacity: 1;
            }

            .swiper-pagination-bullets {
                position: fixed;
                width: 100% !important;
                top: 40px;
                background: white !important;
                height: 40px !important;
            }

            .swiper-slide {
                background-color: white;
            }

            .swiper-wrapper {
                color: green;
            }

html代码：

        <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">Slide 1</div>
                    <div class="swiper-slide">Slide 2</div>
                    <div class="swiper-slide">3</div>
                    <div class="swiper-slide">Slide 4</div>
                    <div class="swiper-slide">Slide 5</div>
                    <div class="swiper-slide">Slide 4</div>
                    <div class="swiper-slide">Slide 5</div>
                </div>
                <!-- Add Pagination -->
                <div class="swiper-pagination"></div>
            </div>

js代码:

<script>
        arr = ['日', '一', '二', '三', '四', '五', '六'];
        var swiper = new Swiper('.swiper-container', {
            pagination: '.swiper-pagination',
            paginationClickable: true,
            paginationBulletRender: function(swiper, index, className) {
                return '<span class="' + className + '">' + arr[index] + '</span>';
            }
        });
    </script>

效果图：

完整代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width" />
        <link rel="stylesheet" href="../../css/swiper.css" />
        <link rel="stylesheet" href="../../css/All.css" />
        <script src="../../js/swiper-3.4.2.min.js"></script>
        <title>课程表</title>
        <style>
            .thing_content {
                width: 100%;
                height: 90%;
            }

            html,
            body {
                background: #efefef;
                position: relative;
                height: 100%;
            }

            body {
                background: #eee;
                font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
                font-size: 14px;
                color: #000;
                margin: 0;
                padding: 0;
            }

            .swiper-container {
                width: 100%;
                height: 100%;
            }

            .swiper-slide {
                text-align: center;
                font-size: 18px;
                background: #fff;

                /* Center slide text vertically */
                display: -webkit-box;
                display: -ms-flexbox;
                display: -webkit-flex;
                display: flex;
                -webkit-box-pack: center;
                -ms-flex-pack: center;
                -webkit-justify-content: center;
                justify-content: center;
                -webkit-box-align: center;
                -ms-flex-align: center;
                -webkit-align-items: center;
                align-items: center;
            }

            span.swiper-pagination-bullet.swiper-pagination-bullet-active {
                width: 14.27%;
                height: 40px;
                border-radius: 0px;
                text-align: center;
                /* line-height: 25px; */
                background: green;
                color: white;
            }

            span.swiper-pagination-bullet {
                width: 14.27%;
                height: 40px;
                border-radius: 0px;
                text-align: center;
                line-height: 40px;
                color: green;
                opacity: 1;
            }

            .swiper-pagination-bullets {
                position: fixed;
                width: 100% !important;
                top: 40px;
                background: white !important;
                height: 40px !important;
            }

            .swiper-slide {
                background-color: white;
            }

            .swiper-wrapper {
                color: green;
            }
        </style>
    </head>
    <body>
        <div class="thing_content">
            <!-- <div style="height: 40px;"></div> -->
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">Slide 1</div>
                    <div class="swiper-slide">Slide 2</div>
                    <div class="swiper-slide">3</div>
                    <div class="swiper-slide">Slide 4</div>
                    <div class="swiper-slide">Slide 5</div>
                    <div class="swiper-slide">Slide 4</div>
                    <div class="swiper-slide">Slide 5</div>
                </div>
                <!-- Add Pagination -->
                <div class="swiper-pagination"></div>
            </div>
        </div>
    </body>
    <script src="../js/jquery.3.2.1.js"></script> -->
    <script>
        arr = ['日', '一', '二', '三', '四', '五', '六'];
        var swiper = new Swiper('.swiper-container', {
            pagination: '.swiper-pagination',
            paginationClickable: true,
            paginationBulletRender: function(swiper, index, className) {
                return '<span class="' + className + '">' + arr[index] + '</span>';
            }
        });
    </script>
</html>

修改Swiper 底部默认小点样式为任意字符串

首先引入插件：

css样式代码：

html代码：

js代码:

效果图：

完整代码：

猜你喜欢