本节知识点
- swiper基本配置
- 如果vue中局部引入swiper autoplay：true 需要这样设置不需要加时间
Swiper基本配置
- 初始化时slide的索引: initialSlide 从0开始,要是写2出现的就是第三个元素
- 滑动方向: direction 这个就表示滑动的方向
- 滑动速度: speed 表示滑动的速度,手指松开至slide贴合时间
- 自动切换的时间间隔: autoplay //自动播放的时间间隔
- 可显示数量:slidesPerView //容器内显示元素的数量
- 滑块居中: centeredSlides //表示滑块居中让元素居中，两边是前后元素的一部分
- 停止滑动: mySwiper.stopAutoplay();
- 启动滑动: mySwiper.startAutoplay();
- observer:true,//修改swiper自己或子元素时，自动初始化swiper
- observeParents:true,//修改swiper的父元素时，自动初始化swiper
代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="css/swiper.min.css">
<script src="js/swiper.min.js"></script>
</head>
<style>
* {
margin: 0px;
padding: 0px;
}
.swiper-container {
width: 800px;
height: 300px;
border: 10px solid #ccc;
}
.swiper-slide {
font-size: 50px;
}
.swiper-slide:nth-of-type(1) {
background: yellow;
}
.swiper-slide:nth-of-type(2) {
background: blue;
}
.swiper-slide:nth-of-type(3) {
background: red;
}
</style>
<body>
<div class="swiper-container">
<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>
</body>
<script>
window.onload = function() {
var mySwiper = new Swiper('.swiper-container', {
direction: 'horizontal', //上下滑动，要是横着滑就是horizontal,要是竖着滑vertical
initialSlide: 1, //表示一上来就跳转到哪个他从0开始
speed: 1000, //默认就是300毫秒
autoplay: 3000, //每一个的时间间隔
slidesPerView: 2, //可显示的数量
centeredSlides: true, //滑块居中
})
}
</script>
</html>
网友评论