使用 swiper 轮播插件遇到的问题及解决方法
- 2019 年 11 月 13 日
- 筆記
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>
注意，我这里为了方便，只写了一个分页按钮，如果有前进后退和进度条等按钮，也要进行区分。
