初涉swiper.js,记录一下使用过程
1.首先引入js和css
<script src="./js/swiper-3.4.2.jquery.min.js"></script>
<link href="./css/swiper-3.4.2.min.css" rel="stylesheet">
2.结合swiper,自己写样式布局
<style>.smallwai{
padding: 0 5px;}</style>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="col-xs-4 smallwai">
<img class="bopic" src="./img/yue1.png"/>
<div>
<B>丰田-汉兰达</B>
<div class="fsize">省油|舒适|7座</div>
<div class="fsize">新车|保险齐全</div>
</div>
</div>
<div class="col-xs-4 smallwai">
<img class="bopic" src="./img/yue2.png"/>
<div>
<B>路虎</B>
<div class="fsize">省油|舒适|5座</div>
<div class="fsize">新车|保险齐全</div>
</div>
</div>
<div class="col-xs-4 smallwai">
<img class="bopic" src="./img/yue3.png"/>
<div>
<B>丰田-普拉多</B>
<div class="fsize">省油|舒适|5座</div>
<div class="fsize">新车|保险齐全</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="col-xs-4 smallwai">
<img class="bopic" src="./img/yue4.png"/>
<div>
<B>丰田陆地巡洋舰</B>
<div class="fsize">省油|舒适|5座</div>
<div class="fsize">新车|保险齐全</div>
</div>
</div>
<div class="col-xs-4 smallwai">
<img class="bopic" src="./img/yue5.png"/>
<div>
<B>路虎</B>
<div class="fsize">省油|舒适|5座</div>
<div class="fsize">新车|保险齐全</div>
</div>
</div>
<div class="col-xs-4 smallwai">
<img class="bopic" src="./img/yue6.png"/>
<div>
<B>保时捷Macan</B>
<div class="fsize">省油|舒适|2座</div>
<div class="fsize">新车|保险齐全</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="col-xs-4 smallwai">
<img class="bopic" src="./img/yue1.png"/>
<div>
<B>丰田-汉兰达</B>
<div class="fsize">省油|舒适|7座</div>
<div class="fsize">新车|保险齐全</div>
</div>
</div>
<div class="col-xs-4 smallwai">
<img class="bopic" src="./img/yue3.png"/>
<div>
<B>丰田-普拉多</B>
<div class="fsize">省油|舒适|5座</div>
<div class="fsize">新车|保险齐全</div>
</div>
</div>
<div class="col-xs-4 smallwai">
<img class="bopic" src="./img/yue5.png"/>
<div>
<B>路虎</B>
<div class="fsize">省油|舒适|5座</div>
<div class="fsize">新车|保险齐全</div>
</div>
</div>
</div>
</div>
</div>
<!-- 如果需要分页器 -->
<div class="swiper-pagination dian"></div>
3.根据需求选择所要的属性
<script type="text/javascript">
window.onload = function() {
var mySwiper = new Swiper ('.swiper-container', {
// 轮播图的方向,也可以是vertical方向
direction:'horizontal',
//播放速度
loop: true,
// 自动播放时间
autoplay:1000,
// 播放的速度
speed:2000,
// 如果需要分页器,即下面的小圆点
pagination: '.swiper-pagination',
// 滑动之后, 定时器也不会被清除
autoplayDisableOnInteraction : false,
});
}
</script>
样式效果图如下