Warning: include(/home/zhaojianuzlhca5oij1idacn/wwwroot/wp-content/plugins/wp-super-cache/wp-cache-base.php): failed to open stream: No such file or directory in /home/zhaojianqzrh9aooyjzi1ahn/wwwroot/wp-content/plugins/wp-super-cache/wp-cache.php on line 95 Warning: include(): Failed opening '/home/zhaojianuzlhca5oij1idacn/wwwroot/wp-content/plugins/wp-super-cache/wp-cache-base.php' for inclusion (include_path='.:') in /home/zhaojianqzrh9aooyjzi1ahn/wwwroot/wp-content/plugins/wp-super-cache/wp-cache.php on line 95 Warning: include_once(/home/zhaojianuzlhca5oij1idacn/wwwroot/wp-content/plugins/wp-super-cache/ossdl-cdn.php): failed to open stream: No such file or directory in /home/zhaojianqzrh9aooyjzi1ahn/wwwroot/wp-content/plugins/wp-super-cache/wp-cache.php on line 118 Warning: include_once(): Failed opening '/home/zhaojianuzlhca5oij1idacn/wwwroot/wp-content/plugins/wp-super-cache/ossdl-cdn.php' for inclusion (include_path='.:') in /home/zhaojianqzrh9aooyjzi1ahn/wwwroot/wp-content/plugins/wp-super-cache/wp-cache.php on line 118 在slidesPerView设置为auto的情况下Swipe初始化显示最后一页? |

Zhao.Jian

Menu

在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样式

— 编辑于 共写了958个字
— 文内使用到的标签:
— 阅读数:5,601
— 暂无评论

Leave a Reply

Your email address will not be published. Required fields are marked *