swiper

swiper（https://www.swiper.com.cn/）

// 下载官方压缩包
// 获取package下swiper.min.js swiper.min.css

引入js css

<link rel="stylesheet" href="css/swiper.min.css">
<script src="js/swiper.min.js"></script>

查看官方示例 新窗口打开

// 查看网页源代码

// 复制相关 js css html代码
.swiper-container {
   width: 100%;
   height: 100%;
}
  
.swiper-slide {
   text-align: center;
   font-size: 18px;
   background: #fff;
   ...
}

<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide">Slide 1</div>
    ...
  </div>
</div>

<script> 
    var swiper = new Swiper('.swiper-container', { 
    ...
    }); 
</script>

// 按需定制相关参数
// 可参考示例源代码

// 同页面不同swiper 元素定义不同类名实例化
(function () {
    var swiper = new Swiper('.swiper-container1', {
        slidesPerView: 2,
        spaceBetween: 30
    },
  });
})();
    (function () {
      var swiper = new Swiper('.swiper-container2', {
      slidesPerView: 2.2,
      spaceBetween: 20
    });
})()

附件