Swiper插件分页器怎么用
本文主要介绍"Swiper插件分页器如何用",希望能够解决您遇到有关问题,下面我们一起来看这篇 "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'
})
关于 "Swiper插件分页器如何用" 就介绍到这。希望大家多多支持编程宝库。
本文主要介绍"SQL Server数据库、表、数据类型基本概念",希望能够解决您遇到有关问题,下面我们一起来看这篇 "SQL Server数据库、表、数据类型基本概念" 文章。 ...