前端插件swiper

swiper是一款功能强大、开源、免费的前端轮播图插件。而且面向手机平板灯移动端。

使用方式：

1. 引包
   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的个性化配置。（是以一个对象的形式传参的）