Swiper使用

前言

  最近的项目中需要使用轮播图，很早之前使用了Swiper，现在已经忘记怎么用了，看了一下官网的例子，现在总结一下，防止遗忘。

使用流程

  Swiper是依赖于其他框架的(例如jQuery)，它是独立的，可以单独引入使用。Swiper包括js文件与css文件，可以下载
)到本地使用，也可以使用cdn引入。css文件在head中引入，js文件紧贴</body>引入。

swiper.css引入

swiper.js引入

<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</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>
 <!--导航等组件可以放在container之外-->

因为swiper.css是根据固定的类名来设置样式的，例如swiper-slide等，所以这些类名是不能修改的。实际使用时，可以将代码中的「Slide1」替换成<img src="" alt="">。
设置了DOM了之后，就到了最关键的js设置，这是设置轮播图的一些属性。如下图所示，声明一个mySwiper变量，它是构造函数Swiper的实例。参数1是轮播图存在的DOM结点名，即”.swiper-container“框，参数2是个对象，包含相关参数。具体参数设置参考官网API文档。

<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/js/swiper.min.js"></script>
<script>              
    var mySwiper = new Swiper ('.swiper-container', {
            slidesPerView: 6,       // 一次显示多个图片
                spaceBetween: 16,   // 图片之间间隔
                loop: true, // 循环模式选项
    
                // 如果需要分页器
                pagination: {
                    el: '.swiper-pagination',
                },
    
                // 如果需要前进后退按钮
                navigation: {
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev',
                },
    
                // 如果需要滚动条
                scrollbar: {
                    el: '.swiper-scrollbar',
                },
        })        
</script>  

Swiper使用中出现的问题

  Swiper在使用中也出现了两个问题，第一个就是左右翻页的按钮，是在图片上面的，如下图:

image.png