本節(jié)知識點
- swiper基本配置
- 如果vue中局部引入swiper autoplay：true 需要這樣設(shè)置不需要加時間
Swiper基本配置
- 初始化時slide的索引: initialSlide 從0開始,要是寫2出現(xiàn)的就是第三個元素
- 滑動方向: direction 這個就表示滑動的方向
- 滑動速度: speed 表示滑動的速度,手指松開至slide貼合時間
- 自動切換的時間間隔: autoplay //自動播放的時間間隔
- 可顯示數(shù)量:slidesPerView //容器內(nèi)顯示元素的數(shù)量
- 滑塊居中: 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, //表示一上來就跳轉(zhuǎn)到哪個他從0開始
speed: 1000, //默認就是300毫秒
autoplay: 3000, //每一個的時間間隔
slidesPerView: 2, //可顯示的數(shù)量
centeredSlides: true, //滑塊居中
})
}
</script>
</html>
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
