Swiper 3 平滑滚动 并 出现文字介绍

引用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不会自动切换

 

这样就可以有类似与跑马灯的无限滚动了

欢迎补充………………………………