swiper使用笔记

初始化

<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide">slider1</div>
    <div class="swiper-slide">slider2</div>
    <div class="swiper-slide">slider3</div>
  </div>
</div>
<script>
var mySwiper = new Swiper('.swiper-container', {

})
</script>

需求追加

<div class="swiper-container">
	<div class="swiper-wrapper">
	    <div class="swiper-slide">slide1</div>
	    <div class="swiper-slide">slider2</div>
	    <div class="swiper-slide">slider3</div>
	</div>
	<div class="swiper-pagination"></div><!--分页器-->
	<div class="swiper-button-prev"></div><!--左箭头,如果需要展示在图片外部则移植swipe-continer外部，自定义定位-->
    <div class="swiper-button-next"></div><!--右箭头,如果需要展示在图片外部则移植swipe-continer外部，自定义定位-->
</div>
<script>
    //存在很多版本问题，个人表示对版本问题很烦，之前可以单独设在外面的现在要设置在对应的对象里面，下面我就不提支不支持的说法了，两种我都会写上
	var mySwiper = new Swiper('.swiper-container', {
	//如果页面有多个swiper这个swiper-container class可以自定义为自己添加的class
        pagination: {
		    el: '.swiper-pagination',//另一种写法单独设置pagination : '.swiper-pagination'
		    clickable :true, //如果你发现你的分页器点击不能切换加上这条，版本问题，另一种写法是单独设置paginationClickable：true
		},
	    navigation: {//前进后退按钮也是看版本，之前需要按钮只需在页面添加html元素
	        nextEl: '.swiper-button-next',
	        prevEl: '.swiper-button-prev',
	    },
		autoplay: {
		   delay: 3000,//另一种写法单独设置autoplay :3000
		   disableOnInteraction: false,//false点击分页器后仍然有autoplay功能，//另一种写法单独设置autoplayDisableOnInteraction : false
	    },
		loop:true,
		slidesPerView : 2,/*可视区域展示个数，默认是一个*/
        spaceBetween : 20,/*可视区域展示模块之间的间距，单位px*/
        //以下设置是针对后台获取的数据进行处理，主要是数据过多，会出现很多问题，比如滑动无效，滑动乱跳，布局乱等问题
        observer:true,//修改swiper自己或子元素时，自动初始化swiper 
	    observeParents:true,//修改swiper的父元素时，自动初始化swiper 
	    onSlideChangeEnd: function(swiper){ 
	        swiper.update(); //swiper更新
	        swiper.startAutoplay(); 重新开始自动切换；另一种写法swiper.autoplay.stop();
	        swiper.reLoop(); //重新对需要循环的slide个数进行计算，当你改变了slidesPerView参数时需要用到
	    } ，
	    onTransitionEnd: function(swiper) {
		    //切换过度完成执行的回调函数
			console.log(swiper)
		},
		//其他版本onTransitionEnd: function(swiper) {}单独提出来
		/*on:function{
           slideChangeEnd: function(swiper){ 
		        swiper.update(); //swiper更新
		        console.log(123)
		    },
		    transitionEnd: function(swiper) {
			   //切换过度完成执行的回调函数
				console.log(swiper)
			},
        }
	})*/
</script>

遇到的问题

前进后退点击有蓝边
添加focus伪类样式去除outline

xx:focus{outline:none}

如果多个模块调用同一个swiper，在callback方法里记得打印看下swiper到底是啥，以免搞错。比如设置自动切换停止一般就是swiper.autoplay.stop();，但如是多个swiper呢，此时的swiper就是数组了，要么swiper[index]，要么用this，个人愚见用this，用swiper[index]的话还要获取index，或者写个for循环。

更多后期补充中。。。

猜你喜欢