Article From:https://segmentfault.com/q/1010000010172529
Question:

swiperOfficially provided breakpoints specify that settings like slidesPerColumn, loop, direction, effect, etc. will not take 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,
        }
    }
});

Now I have a vertical sliding effect on the desktop (another swiper on the right clicks to switch this swiper, in the form of a thumbnail).

In the pad vertical and mobile version, we need to make the swiper slide horizontally. The current situation is that in the case of window resize and screen rotation, the direction attribute does not take effect immediately, requiring a refresh of the current page.

How can we change the direction attribute immediately at the time of window change, and seek solutions.

Answer 0:

It seems that you can destory, and then change direction.

So:

mySwiper.destroy(true,true);

mySwiper = new Swiper(…);

Leave a Reply

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