关于swiper的一些常用属性及示例

1、 spaceBetween: 10,//在slide之间设置距离（单位px）

2、slidesPerView: 4,//swiper 设置轮播列数

3、 freeMode: true,//启用自由模式功能,默认情况下Swiper 每次滑动时只滑动一个Slide，并且会自动贴合Wrapper。开启自由模式后，Swiper 会根据惯性滑动可能不止一格且不会贴合

 4、click(swiper,event)，回调函数，当你点击或轻触Swiper 后执行，相当于tap。接受swiper实例和touchend事件作为参数。Swiper5版本之前会有300ms延迟。

<script language="javascript"> 
var mySwiper = new Swiper('.swiper',{
  on:{
    click: function(){
      alert('你点了Swiper');
    },
  },
})
</script>

5、slideChange，事件函数。在当前Slide切换到另一个Slide时执行(activeIndex发生改变)，一般是在点击控制组件、释放滑动的时间点。可选Swiper实例作为参数

示例：

<script language="javascript"> 
var mySwiper = new Swiper('.swiper',{
  on:{
    slideChange: function(){
      alert('改变了，activeIndex为'+this.activeIndex);
    },
  },
})
</script>

6、clickedIndex返回最后点击Slide的索引。(click)

示例1：

<script> 
  var mySwiper = new Swiper('.swiper',{
    on:{
      click:function(){
        alert(this.clickedIndex);
      }
    }
  })
</script>

示例2：

7、click搭配clickedIndex（返回最后点击Slide的索引。(click)）实现了当你点击或轻触Swiper 后执行，若判断当前点击的是第0个时，大图小图视频都播放，否则都暂停，显示图片内容

<script>
    var swiper = new Swiper(".mySwiper", {
      spaceBetween: 10,
      navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
      },
      slidesPerView: 4,
      freeMode: true,
      watchSlidesProgress: true,
	  on: {
			click: function(e){
				let index = e.clickedIndex 
				console.log(index)
				let video1 = document.querySelector("#mymousdown")
				let video2 = document.querySelector("#mymousdown2")
				if(index === 0){
					video1.play()
					video2.play()
				}else{
					video1.pause()
					video2.pause()
				}	
		  }
	  }
    });
</script>

8、 slideChange搭配activeIndex（返回当前活动块(激活块)的索引）实现了当slider切换到另一个slider执行时，若判断当前执行的索引是第0个时，大图小图视频都播放，否则都暂停，显示图片内容

<script type="text/javascript">
	var swiper2 = new Swiper(".mySwiper2", {
	  spaceBetween: 10,
	  navigation: {
	    nextEl: ".swiper-button-next",
	    prevEl: ".swiper-button-prev",
	  },
	  thumbs: {
	    swiper: swiper,
	  },
	  on: {
	  		slideChange: function(e){
				let index = e.activeIndex
				console.log(index)
				let video1 = document.querySelector("#mymousdown")
				let video2 = document.querySelector("#mymousdown2")
				if(index === 0){
					video1.play()
					video2.play()
				}else{
					video1.pause()
					video2.pause()
				}
	  		}
	  }
	});
</script>

9、activeIndex，返回当前活动块(激活块)的索引

示例1：

<script> 
  var mySwiper = new Swiper('.swiper')
  $('#btn1').click(function(){
    alert(mySwiper.activeIndex); 
  })
</script>

示例2：

<script type="text/javascript">
	var swiper2 = new Swiper(".mySwiper2", {
	  spaceBetween: 10,
	  navigation: {
	    nextEl: ".swiper-button-next",
	    prevEl: ".swiper-button-prev",
	  },
	  thumbs: {
	    swiper: swiper,
	  },
	  on: {
	  		slideChange: function(e){
				let index = e.activeIndex
				console.log(index)
				let video1 = document.querySelector("#mymousdown")
				let video2 = document.querySelector("#mymousdown2")
				if(index === 0){
					video1.play()
					video2.play()
				}else{
					video1.pause()
					video2.pause()
				}
	  		}
	  }
	});
</script>

10、完结。------------------------------------------------------------------------------------------------------------------