修改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代码：

        

                

                    
Slide 1
                    
Slide 2
                    
3
                    
Slide 4
                    
Slide 5
                    
Slide 4
                    
Slide 5
                
                
                

            

js代码:

效果图：

完整代码：

    
        
        
        
        
        
        
        
    
    
        

            
            

                

                    
Slide 1
                    
Slide 2
                    
3
                    
Slide 4
                    
Slide 5
                    
Slide 4
                    
Slide 5
                
                
                

            
        
    
     -->