废话少说，直接上dome
<!DOCTYPE html>
<html>
<head>
<title></title>
<!-- swiper 不用引用jquery.js也是可以的 -->
<!-- <script src="./jquery.min.js"> </script> -->
<link rel="stylesheet" href="./swiper-3.4.2.min.css">
<script src="./swiper-3.4.2.min.js"> </script>
<style type="text/css">
.swiper-container, .swiper-slide {
width: 500px;
height: 200px;
}
.bg{
background-color: blue;
}
.bg2{
background-color: yellow;
}
.bg3{
background-color: red;
}
</style>
</head>
<body>
<div class="swiper-container">
<div class="swiper-wrapper">
<!--First Slide-->
<div class="swiper-slide bg">
<!-- 这里添加第一个HTML内容 -->111111
</div>
<!--Second Slide-->
<div class="swiper-slide bg2">
<!-- 这里添加第二个HTML内容 -->222222
</div>
<div class="swiper-slide bg3">
<!--Third Slide-->
<!-- 这里添加第三个HTML内容 -->333333
</div>
<!--Etc..-->
</div>
<!-- 这是两个按钮 -->
<a class="swiper-button-next" href="javascript:;"></a>
<a class="swiper-button-prev" href="javascript:;"></a>
</div>
<script type="text/javascript">
var mySwiper = new Swiper('.swiper-container', {
// loop: true, //此属性如果放开的话，如果第一页也会点击到-1页
// autoplay: 2000, //自动轮播时间间隔
// 如果需要前进后退按钮
nextButton: '.swiper-button-next',
prevButton:'.swiper-button-prev',
onSlideChangeEnd: function(swiper){
if(swiper.isEnd){
swiper.nextButton.css('display','none');
}else{
swiper.nextButton.css('display','block');
}
}
})
</script>
</body>
</html>页面效果图：
官方详细文档： http://www.swiper.com.cn/api/method/2016/0219/303.html
博主原创，载于请注明出处: https://blog.csdn.net/qq_36698956
版权声明：博客对我来说是记忆的笔记和知识的分享~此博文为博主原创转载请注明出处即可~