(1) 本節(jié)知識點(diǎn)
- noSwiping 禁止滑屏
- 前進(jìn)后退按鈕
(2) 代碼
<!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 stop">Slide 1</div>
<div class="swiper-slide swiper-no-swiping">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
</div>
</div>
<button class="prev"> prev</button>
<button class="next">next</button>
</body>
<script>
window.onload = function() {
var mySwiper = new Swiper('.swiper-container', {
direction: 'horizontal', //上下滑動悉尾，要是橫著滑就是horizontal,要是豎著滑vertical
noSwiping: true, //必須配合swiper-no-swiping,哪個滑塊不需要滑動枚粘，就加這個類
noSwipingClass: "stop", //這個屬性就是為了防止記不住上面那個類名。那我自己定義一個類名來替換,設(shè)置后swiper-no-swiping就沒有任何效果
nextButton: ".next", //下一個按鈕可以放在容器的外面
prevButton: ".prev" //上一個按鈕可以放在容器的外面
})
}
</script>
</html>
