Swiper插件分页器使用

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Swiper插件分页器使用相关的知识,希望对你有一定的参考价值。

  1. 引入swiper.min.css

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

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

    <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>

  4. 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>

  5. js部分

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

以上是关于Swiper插件分页器使用的主要内容,如果未能解决你的问题,请参考以下文章

swiper自定义分页器

一个swiper 两个分页器的写法总结

swiper.js 2.0增加一个鼠标移入分页器的小点后就切换展示图片

swiper 增加一个鼠标移入分页器的小点后就切换展示图片

Swiper分页器pagination多页面使用失效问题解决

swiper的使用之一:自定义分页器pagiantion