swiper自动无缝轮播（无限滚动）

样式展示

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>