一、注意
当设置speed太小时会有卡顿，建议设置为6000
二、效果图
三、代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>swiper4 无缝轮播处理</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/css/swiper.min.css">
<style>
.swiper-container {
height: 100px;
overflow: hidden;
}
.swiper-container-horizontal>.swiper-wrapper {
color: #fff;
transition-timing-function: linear !important;
-o-transition-timing-function: linear !important;
-webkit-transition-timing-function: linear !important;
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
/* Center slide text vertically */
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
</style>
</head>
<body>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide" style="background:red;">Slide 0</div>
<div class="swiper-slide" style="background:orange;">Slide 1</div>
<div class="swiper-slide" style="background:yellow;">Slide 2</div>
<div class="swiper-slide" style="background:green;">Slide 4</div>
<div class="swiper-slide" style="background:red;">Slide 5</div>
<div class="swiper-slide" style="background:blue;">Slide 6</div>
<div class="swiper-slide" style="background:indigo;">Slide 7</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/js/swiper.min.js"></script>
<script>
var mySwiper = new Swiper('.swiper-container', {
slidesPerView: 4,
spaceBetween: 35,
loop: true,
speed: 6000, //滚动速度
freeMode: true,
loop: true,
autoplay: {
delay: 0,
disableOnInteraction: false, //就算触摸了也继续滚动
loopPreventsSlide: true
},
})
</script>
</body>
</html>
标签：center,align,Js,Slide,webkit,display,swiper,无缝 From： https://www.cnblogs.com/yang-2018/p/16652230.html