swiper插件还是比较有名的,大家应该都不陌生。
我只是记录一下我在使用过程中遇到的几个属性,详细API大家可以直接去官网查看:Swiper4.x使用方法
初始化 Swiper:
var mySwiper = new Swiper ('.swiper-container', {
direction: 'horizontal',//横向切换,默认:vertical(纵向切换)
loop: true,//环路
// 如果需要分页器
pagination: {
el: '.swiper-pagination',
},
// 如果需要前进后退按钮
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
// 如果需要滚动条
scrollbar: {
el: '.swiper-scrollbar',
},
})
页面加载完再初始化:
$(document).ready(function () {
...
})
我在使用过程中遇到的一些问题:
默认切换按钮在轮播图的内部(图1),我需要把它放在外面(图2)。
图1
图2
js并没有相应的配置项,我们可以把 .swiper-button-prev 和 .swiper-button-next 两个按钮标签移到 .swiper-container 标签的外面,然后在再嵌一层将它们包住,给它设置一个 padding ,然后需要在 CSS 中加一个 position: relative; 设置相对定位,如下图:
代码如下:
HTML:
<div class="swiper-box">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="banner.jpg"/></div>
<div class="swiper-slide"><img src="banner.jpg"/></div>
<div class="swiper-slide"><img src="banner.jpg"/></div>
</div>
<!-- 如果需要分页器 -->
<!--<div class="swiper-pagination"></div>-->
<!-- 如果需要导航按钮 -->
<!--<div class="swiper-button-prev"></div>-->
<!--<div class="swiper-button-next"></div>-->
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
样式也需要稍微调一下,CSS代码:
.swiper-box{
width: 590px;
padding: 30px;
position: relative;
margin: 0 auto;
}
.swiper-container {
width: 530px;
}
.swiper-pagination{
text-align: center;
width: 590px;
}
.swiper-pagination-bullet{
margin: 10px;
}
可以再添加一行标题:
稍微改一下样式,把它定位到图片下方:
.swiper-title{
text-align: center;
position: absolute;
bottom: 10px;
width: 100%;
line-height: 36px;
background: rgba(0,0,0,0.2);
color: #FFF;
}
如下图:
分组显示:以3个为一行/组 在js中添加下面两行
slidesPerView : 3,//一行显示3个
slidesPerGroup : 3,//3个一组
设置间距:以20px为例
spaceBetween : 20,
两行显示:
slidesPerColumn: 2,//显示2行
这里需要注意一下,我写了7个轮播图,却显示3个分页按钮,其实这里要注意一下 slidesPerGroup 属性,将其改为6(一页显示的个数)即可正常显示:
slidesPerGroup : 6,
一个页面中写多个 Swiper 组件:
HTML:先写两个盒子用 class 进行区分
<div class="swiper-container swiper-container1">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="banner.jpg"/></div>
<div class="swiper-slide"><img src="banner.jpg"/></div>
<div class="swiper-slide"><img src="banner.jpg"/></div>
</div>
<div class="swiper-pagination pagination1"></div>
</div>
<div class="swiper-container swiper-container2">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="banner.jpg"/></div>
<div class="swiper-slide"><img src="banner.jpg"/></div>
<div class="swiper-slide"><img src="banner.jpg"/></div>
</div>
<div class="swiper-pagination pagination2"></div>
</div>
js 代码:定义两个 Swiper 盒子和分页按钮。
<script>
var mySwiper1 = new Swiper('.swiper-container1', {
direction: 'horizontal',
pagination: {
el: '.pagination1',
},
}),
mySwiper2 = new Swiper('.swiper-container2', {
direction: 'horizontal',
pagination: {
el: '.pagination2',
},
})
</script>
注意,我这里为了方便,只写了一个分页按钮,如果有前进后退和进度条等按钮,也要进行区分。