Swiper轮播图插件

Posted 2020-11-15 wangshouren

Swiper官方API地址：https://www.swiper.com.cn/api

<>
<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide">slider1</div>
    <div class="swiper-slide">slider2</div>
    <div class="swiper-slide">slider3</div>
  </div>
</div>
<script>

常用配置项

swiper = new Swiper('.swiper-container',{
            autoplay: 3000,//自动播放延迟
            loop: true,//是否无缝播放，默认false
            autoplayDisableOnInteraction: false//手指滑动后是否停止播放，默认true
            pagination: '.swiper-pagination',//要实现分页效果的元素
            paginationType: 'fraction'//实现哪种分页效果
            
        });