Swiper插件分页器硬应该怎么样使用

亿速云的服务器不仅具有高稳定性，高速访问，而且易于管理，安全和轻松使用，以减少用户在服务器维护中的能量和时间成本，并专注于自己的业务的开发和推广。亿速云服务器，致力于为用户提供性价比最高的服务器！

引入swiper.min.css

引入query.min.js 和swiper.min.js

分页器以及轮播的一般样式引用

<style type="text/css">
        .swiper-container {
            margin: 0 auto;
            position: relative;
            overflow: hidden;
            width:100%;     
        }
        .swiper-slide {
            position: relative;
            width:100%;
        }
        #article-slide p img {
            width: 100%;
            display: block;
        }
        #article-slide .swiper-aa {
            width: 100%;
            position: absolute;
            text-align: center;
            z-index: 210;
            bottom: 10px;
            left: 0;
           
        }
        .swiper-pagination-bullet-active{
            background: red;
        }

        #article-slide .swiper-pagination-bullet{
            margin:0 5px;
        }
    </style>

html样式：

<div class="swiper-container swiper-container-horizontal" id="article-slide">

 针对图片
    <div class="swiper-wrapper">
        <div class="sec-activity swiper-slide swiper-slide-duplicate">
            <p>
                <a href="http://m.welltrend.com.cn/special/meiguo-shuangtui-2017"><img
                    src="img/retreat_03.jpg"></a>
            </p>
        </div>
        <div class="sec-activity swiper-slide">
            <p><a href="/Responsive-56255.html"><img src="img/retreat_04.jpg"></a></p>
        </div>
        <div class="sec-activity swiper-slide swiper-slide-prev">
            <p><a href="/Responsive-56266.html"><img src="img/retreat_05.jpg"></a></p>
        </div>
        <div class="sec-activity swiper-slide swiper-slide-active">
            <p><a href="/Responsive-55642.html"><img src="img/retreat_06.jpg"></a></p>
        </div>
    </div>
针对分页器
    <div class="swiper-aa swiper-pagination-clickable">
            <span class="swiper-pagination-bullet"></span>
            <span class="swiper-pagination-bullet"></span>
            <span class="swiper-pagination-bullet swiper-pagination-bullet-active"></span>
            <span class="swiper-pagination-bullet"></span>
    </div>
</div>

js部分

var countrySwp = new Swiper('#article-slide', {
            pagination: '.swiper-aa',
            spaceBetween: 25,
            initialSlide: 0,
            slidesPerView: 'auto',
            centeredSlides: true,
            paginationClickable: true,
            paginationType:'bullets'
        })
       

亿速云服务器与全球多个国家*机房直接合作，提供包括香港、美国、日本等国家和地区的服务器，需要的请联系亿速云官方客服！ 优质的服务器租用!