swiper是一款免费,强大的滑动的插件。
使用步骤:
1.引入插件(可以使用网络地址,也可以下载到本地)
2.创建HTML结构
3.初始化swiper
实例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/swiper.min.css">
<style>
.swiper-container,
.swiper-container1 {
width: 600px;
height: 300px;
}
.swiper-slide img,
.swiper-slide1 img {
width: 100%;
height: 100%;
}
</style>
<script src="js/swiper.min.js"></script>
</head>
<body>
<!--
swiper是一款免费,强大的滑动的插件。
使用步骤:
1.引入插件(可以使用网络地址,也可以下载到本地)
2.创建HTML结构
3.初始化swiper
-->
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="img/1.jpg" alt=""></div>
<div class="swiper-slide"><img src="img/2.jpg" alt=""></div>
<div class="swiper-slide"><img src="img/3.jpg" alt=""></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>
<div class="swiper-container1">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="img/1.jpg" alt=""></div>
<div class="swiper-slide"><img src="img/2.jpg" alt=""></div>
<div class="swiper-slide"><img src="img/3.jpg" alt=""></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之外 -->
<script>
var mySwiper1 = new Swiper('.swiper-container1', {
// direction: 'vertical', // 垂直切换选项
loop: true, // 循环模式选项
autoplay: {
delay: 2000,
}, //可选选项,自动滑动
// 如果需要分页器
pagination: {
el: '.swiper-pagination',
},
keyboard: {
enabled: true,
onlyInViewport: true,
},
// 如果需要前进后退按钮
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
// 可能滑动多个
freeMode: true,
// 切换模式slide的切换效果,默认为"slide"(位移切换),可设置为'slide'(普通切换、默认),"fade"(淡入)"cube"(方块)"coverflow"(3d流)"flip"(3d翻转)。
effect: 'flip',
effect: 'cube',
cubeEffect: {
slideShadows: true,
shadow: true,
shadowOffset: 100,
shadowScale: 0.6
},
// 淡入淡出
fadeEffect: {
crossFade: true,
},
touchRatio: 0.5, //触摸变慢
// effect: 'flip',
// flipEffect: {
// slideShadows: true,
// limitRotation: true,
// }
// 如果需要滚动条
// scrollbar: {
// el: '.swiper-scrollbar',
// },
})
</script>
</body>
</html>
以上有部分的属性、方法操作,在官网中有更全面的的操作方法!
官网地址: