在slidesPerView设置为auto的情况下Swipe初始化显示最后一页?
在angular1.x中使用swiper来实现左右滑动的效果,然而因为使用ng-repeat循环数据,所以这边设置了slidesPerView:auto 使得在显示上符合需求。但是出现了问题,滑动都没问题,就是默认初始化显示最后一页,官方虽然提供了办法,但是然并软,百度后发现也有人发现这个问题,最终并未完全解决问题,自己去看了官方提供的方法解决。
swiper本身是通过样式来设置页面的位移显示,即通过最外层的swiper-wrapper的css属性transform设置页面位移显示。
贴出方法:
var Zswiper = new Swiper('.swiper-container', { ... }) this.$timeout(() => { console.log(Zswiper.prevButton); /**增加class */ Zswiper.prevButton.addClass("swiper-button-disabled"); /**移除class */ Zswiper.nextButton.removeClass("swiper-button-disabled"); /**设置过渡效果0秒过渡时间 */ Zswiper.setWrapperTransition(0); /**设置位移0 显示第一页 */ Zswiper.setWrapperTranslate(0); /**使用jquery方法设置 */ // $(".swiper-wrapper").css('transform','translate3d(0px, 0px, 0px)'); },1000)
以上设置就可以实现在slidesPerView: 'auto'的情况下,默认显示第一页,并且后退前进按钮显示正确了。 不过还是有个问题,就是点击前进按钮的时候,第一次会直接跳转到最后一页,之后都正常。
样式可以用swipper自带的属性方法:
设置样式可以用swipper自带的属性方法: var mySwiper = new Swiper('.swiper-container',{ }) mySwiper.wrapper.addClass('my-class');//设置.swiper-wrapper样式