-
进入官网下载swiper插件
插件下载地址
-
加载插件,需要用到的文件有swiper-bundle.min.js和swiper-bundle.min.css文件
<!-- 引入swipercss文件 -->
<link rel="stylesheet" href="swiper/swiper-bundle.min.css">
<!-- 引入swiper js 文件 -->
<script src="swiper/swiper-bundle.min.js"></script>
html内容:
从Swiper7开始,容器默认类名由'.swiper-container'变更为'.swiper'。
<!-- <div class="swiper-container"> -->
<!-- 改为: -->
<div class="swiper">
<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>
-
查看官网API文档,解锁更多功能。
Swiper官方API文档
window.onload = function() {
var mySwiper = new Swiper('.swiper', {
//环形切换关闭
loop: true,
// 切换的速度
speed: 800, //滑动或者自动换页时的速度
// 如果需要分页器
pagination: {
el: '.swiper-pagination',
type: 'bullets',
// type: 'fraction',
// type: 'progressbar',
// type: 'custom',
},
autoplay: {
delay: 2000,
stopOnLastSlide: false,
disableOnInteraction: true,
},
});
//鼠标覆盖停止自动切换
mySwiper.el.onmouseover = function() {
mySwiper.autoplay.stop();
}
//鼠标离开开始自动切换
mySwiper.el.onmouseout = function() {
mySwiper.autoplay.start();
}
}