swiper插件获取当前的轮播元素及索引index( loop=true）

定义轮播标签
swiper-slide–轮播元素class

	<div class="swiper-container" >
		<div class="swiper-wrapper" id="swiper-slide-content">
			<div class="swiper-slide"  data-name="测试1" >
				<div class="item">
					<div class="swpimg">
						<img th:src="@{/screen/app/images/swpimg01.png}" alt="">
					</div>							
					<p>测试轮播1</p>
			   </div>
		  </div>
		  <div class="swiper-slide"  data-name="测试2" >
				<div class="item">
					<div class="swpimg">
						<img th:src="@{/screen/app/images/swpimg01.png}" alt="">
					</div>							
					<p>测试轮播2</p>
			   </div>
		  </div>
	  </div>
</div>

Swiper插件初始化
onTransitionEnd回调事件–轮播切换时会触发
swiper-slide-active 标识当前正在轮播的元素，可以根据它来获取我们自定义的元素属性值：data-name
data-swiper-slide-index 当前轮播元素的索引属性

//初始化Swiper
var swiper = new Swiper('.swiper-container', {
		// 显示几个
		slidesPerView: 3,
		paginationClickable: true,
		// 在slide之间设置距离
		spaceBetween: 20,
		// 设定slide与左边框的预设偏移量
		slidesOffsetBefore: 20,
		// 设定slide与左边框的预设偏移量
		slidesOffsetAfter: 20,
		autoplayDisableOnInteraction:false,
		autoplay: 5000,
		 loop: true,
		 onTransitionEnd: function (swiper) {
			var index = $('.swiper-slide-active').attr('data-swiper-slide-index');
			 console.log(index);
	         var name = $(".swiper-slide-active").attr("data-name");
		     console.log(name)
	         console.info("页面跳转到第:", swiper.activeIndex, " 页")
							 }
						});

轮播控制
开始轮播----swiper.startAutoplay();
暂停轮播----swiper.stopAutoplay();