引用swiper依赖
swiper.min.css
swiper.min.js
创建swiper的js,html,css
var swiper = new Swiper('.swiper-container2', {
pagination: '.swiper-pagination',
slidesPerView: 5,
paginationClickable: true,
spaceBetween: 30,
// freeMode: true,
autoplay : 1,
speed:3000,
loop : true,
// autoplay : 1000,
// slidesPerView : 'auto',
// loopedSlides :8,
});
<div class="swiper-container2">
<div class="swiper-wrapper">
<div class="swiper-slide">
<a href="javascript:void(0)">
<img src="../images/teacher1.png" >
<div class="tAsBoxLeftBoxContent_jianjie">
<div class="tAsBoxLeftBoxContent_jianjie_name">
嘻嘻嘻11
</div>
<div class="tAsBoxLeftBoxContent_jianjie_zhaiyao">
哈哈哈哈2
</div>
</div>
</a>
</div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
</div>
ps:重复swiper-slide部分
.tAsBoxLeftBoxContent_jianjie{
opacity: 0;
transition: all 1s ease-in-out 0s;
}
.swiper-slide-active .tAsBoxLeftBoxContent_jianjie{
opacity: 1;
}
.swiper-container2>.swiper-container-free-mode > .swiper-wrapper {
-webkit-transition-timing-function: linear; /*之前是ease-out*/
-moz-transition-timing-function: linear;
-ms-transition-timing-function: linear;
-o-transition-timing-function: linear;
transition-timing-function: linear;
margin: 0 auto;
}
认准swiper-slide-active,它是当前模块是意思。这样就可以通过swiper-slide-active来判断是否是当前item下的文字
改变swiper-wrapper的属性,并在js中添加 autoplay : 1, 自动切换的时间间隔(单位ms),不设定该参数slide不会自动切换
这样就可以有类似与跑马灯的无限滚动了
欢迎补充………………………………