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

发布时间：2023-11-04 10:30:38 所属栏目：教程来源：转载

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

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

　　        })

　　

（编辑：好传媒网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!