轮播图插件Swiper3
HTML代码
如果只是简单的使用轮播图,直接复制我的html代码就可以.
如果想要高级一些,就自己去看文档吧
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Swiper demo</title>
<!-- Link Swiper's CSS -->
<link rel="stylesheet" href="../dist/css/swiper.min.css">
<!-- Demo styles -->
<style>
.swiper-container {
600px;
height: 300px;
}
.swiper-slide[one]{
background-image: linear-gradient(to bottom, #F45843 ,#9143af );
}
.swiper-slide[two]{
background-image: linear-gradient(to bottom, #F45843 ,#4395f4 );
}
.swiper-slide[three]{
background-image: linear-gradient(to bottom, #F45843 ,#e4f443 );
}
</style>
</head>
<body>
<!-- Swiper -->
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide" one>图片1</div>
<div class="swiper-slide" two>图片2</div>
<div class="swiper-slide" three>图片3</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>
<!-- Swiper JS -->
<script src="../dist/js/swiper.min.js"></script>
<!-- Initialize Swiper -->
<script>
var swiper = new Swiper('.swiper-container',{
// direction: 'vertical',
loop: true,
// 如果需要分页器
// pagination:'.swiper-pagination',
//
// // 如果需要前进后退按钮
// nextButton: '.swiper-button-next',
// prevButton: '.swiper-button-prev',
//
// // 如果需要滚动条
// scrollbar: '.swiper-scrollbar',
});
</script>
</body>
</html>
js,css下载地址
https://files.cnblogs.com/files/wangzhaobo/swiper.min.js
https://files.cnblogs.com/files/wangzhaobo/swiper.min.css
github地址
https://github.com/nolimits4web/swiper