javascript - swiper如何在窗口大小改变时改变direction属性

问题描述

问 题

swiper官方提供的breakpoints断点设定明确表示像slidesPerColumn、loop、direction、effect等设置之后也不会生效。

var controlledSwiper = new Swiper('.swiper-container.gallery-top',{
    direction: 'vertical',
    slidesPerView: 1,
    spaceBetween: 0,
    onlyExternal: true,
    breakpoints: {
        1023: {
            direction: 'horizontal',
            onlyExternal: false,
            pagination : '.swiper-pagination',
            paginationClickable :true,
        }
    }
});

现在我在桌面版是一个纵向的滑动效果（右边有另一个swiper点击切换这个swiper，缩略图的形式）。

在pad竖版和手机版上， 需要使这个swiper进行横向滑动。现在的情况是窗口resize和屏幕旋转的情况下，direction属性都不能立刻生效，需要刷新一次当前页面。

怎么样才能在窗口改变的时刻立即改变direction属性，求解决方案。

解决方案

好像你可以destory，然后改变direction

这样：

mySwiper.destroy(true,true);

mySwiper = new Swiper(...);

这篇关于javascript - swiper如何在窗口大小改变时改变direction属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！