样式展示
swiper自动无缝匀速双向滚动
html代码片段
引用的时候要注意一下swiper版本,我这里用的是4.4.2
<link rel="stylesheet" href="css/swiper.min.css">
<div class="seamlesswrap">
<!-- 1.swiper无缝轮播 -->
<div class="swiper-container seamless01-swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="img/img01.jpg"/>
</div>
<div class="swiper-slide">
<img src="img/img02.jpg"/>
</div>
<div class="swiper-slide">
<img src="img/img03.jpg"/>
</div>
<div class="swiper-slide">
<img src="img/img04.jpg"/>
</div>
<div class="swiper-slide">
<img src="img/img05.jpg"/>
</div>
<div class="swiper-slide">
<img src="img/img06.jpg"/>
</div>
<div class="swiper-slide">
<img src="img/img07.jpg"/>
</div>
</div>
</div>
<div class="swiper-container seamless02-swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="img/img01.jpg"/>
</div>
<div class="swiper-slide">
<img src="img/img02.jpg"/>
</div>
<div class="swiper-slide">
<img src="img/img03.jpg"/>
</div>
<div class="swiper-slide">
<img src="img/img04.jpg"/>
</div>
<div class="swiper-slide">
<img src="img/img05.jpg"/>
</div>
<div class="swiper-slide">
<img src="img/img06.jpg"/>
</div>
<div class="swiper-slide">
<img src="img/img07.jpg"/>
</div>
</div>
</div>
</div>
css样式
/* seamlesswrap */
.seamlesswrap{width: 100%;box-sizing: border-box;padding: 200px;}
.seamlesswrap img{width: 100%;display: block;}
.seamlesswrap .swiper-container-free-mode>.swiper-wrapper{
-webkit-transition-timing-function:linear!important;
-o-transition-timing-function:linear!important;
transition-timing-function:linear!important; }
.seamlesswrap .swiper-container{margin: 10px 0;}
js代码
<script src="js/jquery.js"></script>
<script src="js/swiper.min.js"></script>
<script>
$(function(){
var mySwiper = new Swiper('.seamless01-swiper', {
observer: true, //开启动态检查器,监测swiper和slide
observeParents: true, //监测Swiper 的祖/父元素
speed: 4000,//切换速度
loop:true,//循环
slidesPerView:4,//显示数量
spaceBetween:10,//间隔
freeMode:true,//自动贴合
autoplay: {//自动播放
delay: 0,//自动切换的时间间隔
stopOnLastSlide: false,//切换到最后一个slide时停止自动切换
disableOnInteraction: false,//用户操作后是否停止
},
breakpoints: {
750: { //当屏幕宽度大于等于320
slidesPerView: 3,
},
}
});
var mySwiper = new Swiper('.seamless02-swiper', {
observer: true, //开启动态检查器,监测swiper和slide
observeParents: true, //监测Swiper 的祖/父元素
speed: 4000,//切换速度
loop:true,//循环
slidesPerView:4,//显示数量
spaceBetween:10,//间隔
freeMode:true,//自动贴合
autoplay: {//自动播放
delay: 0,//自动切换的时间间隔
stopOnLastSlide: false,//切换到最后一个slide时停止自动切换
disableOnInteraction: false,//用户操作后是否停止
reverseDirection: true,//方向切换
},
breakpoints: {
750: { //当屏幕宽度大于等于320
slidesPerView: 3,
},
}
});
})
</script>