swiper是一款功能强大、开源、免费的前端轮播图插件。而且面向手机平板灯移动端。
使用方式:
- 引包
5版本 PC端 移动端
swiper-bundle.min.js
swiper-bundle.min.css
<link rel="stylesheet" href="css/swiper-bundle.min.css">
<script src="./js/swiper-bundle.min.js"></script>
添加HTML部分
swiper-contaioner最外层的div容器;swiper-wrapper是一个按照一定顺序排泄的所有轮播图的集合,在默认情况下是从左到右的排列;swiper-slid:每一张轮播图。swiper-pagination是分页器导航,也就是下图所有显示的原点。swiper-button-prev swiper-button-next插件默认的按钮左右箭头;swiper-scrollbar滚动条。
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="./image/轮播/202104011128519006001.jpg" alt=""></div>
<div class="swiper-slide"><img src="./image/轮播/202104011133182944010.jpg" alt=""></div>
<div class="swiper-slide"><img src="./image/轮播/202104121130451705637.png" alt=""></div>
</div>
<!-- 如果需要分页器 -->
<div class="swiper-pagination"></div>
<!-- 如果需要导航按钮 -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<!-- 如果需要滚动条 -->
<div class="swiper-scrollbar"></div>
</div>
写完HTML后还需要对这个轮播图进行初始化。
<script>
// new Swiper(swiperContainer,parameters) swiperContainer可以是选择器,也dom元素标签节点
var swiper = new Swiper('.swiper-container', {
pagination: {
el: '.swiper-pagination', // 分页器容器的css选择器或HTML标签。分页器灯组件可以至于container之外(也就是说分页器可以放在轮播图容器的外面)
dynamicBullets: true, // 动态分页器
},
});
</script>
这个初始化有两个参数:
第一个参数:Swiper容器的css选择器,可以把.swiper-container换成任何你自定义的名字。
第二个参数:Swiper的个性化配置。(是以一个对象的形式传参的)