< ! ---------- HTML ----------- >
<div class="swiper-container box">
<div class="swiper-wrapper slider">
<div class="swiper-slide"></div>
<div class="swiper-slide"></div>
<div class="swiper-slide"></div>
<div class="swiper-slide"></div>
<div class="swiper-slide"></div>
<div class="swiper-slide"></div>
<div class="swiper-slide"></div>
<div class="swiper-slide"></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>
< ! --------- Style --------------- >
<style>
.box {
width: 300px;
height: 433px;
margin: 100px auto;
}
.slider img{
width: 300px;
height: 433px;
}
</style>
< ! --------- JavaScript ------- >
<script>
var swiper = new Swiper('.swiper-container', {
// 如果需要分页器器
pagination: '.swiper-pagination',
// 如果需要前进后退按钮
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
// 如果需要滚动条
scrollbar: '.swiper-scrollbar',
loop: true,
autoplay: 1000,
direction: 'horizontal', //切换方向 水平(horizontal)或垂直(vertical)
speed: 400,
keyboardControl: true,
paginationType: "fraction",
effect: 'flip',
});
</script>
< ! --------- 效果展示 ---------- >
zepto1.gif
