swiper

swiper autoplay是设置事件

onAutoplay:function(mySwiper){ var index = mySwiper.realIndex; //获得当前的slide的index var name = $(".swiper-slide").eq(index+1).data("name"); $(".star-name").text(name);//将图片和图片名称对应 }

onSliderMove 手机端swiper滑动时触发事件

onSliderMove: function(mySwiper, event){ mySwiper.stopAutoplay(); //先停止自动播放 },

onSlideChangeEnd 手机端swiper滑动完成时触发事件

3秒后判断myswiper是不是处于过渡阶段，如果不是过渡，则自动播放 onSlideChangeEnd: function(mySwiper){ var index = mySwiper.realIndex; var name = $(".swiper-slide").eq(index+1).data("name"); $(".star-name").text(name);//将图片和图片名称对应 setTimeout(function(){ //判断myswiper是不是处于过渡阶段 if(!mySwiper.animating){ mySwiper.startAutoplay();//开始自动播放 } },3000); }

swiper 改变swiper-button-next/swiper-button-prev的颜色

background-image: url(data:image/svg+xml;charset=utf-8,<svg xmlns%3D\'http:%2F/www.w3.org%2…2C22L2.9,2.1L5%2C0L27,22L27%2C22z\' fill%3D\'#4ba2a7\'%2F><%2Fsvg>) !important; 将fill=\'%234ba2a7\'中的4ba2a7颜色值改成自己想要的颜色值即可。

swiper在QQ浏览器和微信浏览器不能轮播

错误原因：使用jquery+swiper实现，造成此现象 修改：使用zepto.js+swiper实现解决轮播问题。