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
});
})()