3

I want to be able to toggle between a slider view and a grid view with a button. I start off with the slider view, initialized like so:

var vis = document.getElementById('vis'),
    swiperOpts = {
            direction: dir,
            loop: true,
            slidesPerView: 1,
            mousewheel: true,
            keyboard: {
                enabled: true,
                onlyInViewport: false
            },
            pagination: {
                el: '#swiper-page',
                type: 'fraction',
            },
            autoplay: {delay: 4444},
            on:{
                resize: function(){
                    if(isLand()) swiper.changeDirection('horizontal');
                    else swiper.changeDirection('vertical');

                    swiper.update();
                },
                autoplayStart: function(){
                    playBtn.innerHTML = '<span class="icon-pause2"></span><span class="sr-only">pause</span>';
                },
                autoplayStop: function(){
                    playBtn.innerHTML = '<span class="icon-play3"></span><span class="sr-only">play</span>';
                }
            }
        },
        swiper = new Swiper(vis, swiperOpts)

I switch to the grid view via:

swiper.destroy(false,true);
vis.classList.remove('swiper-container');
vis.classList.add('grid');

This all works fine. But then I reinitialize, sic:

vis.classList.add('swiper-container');
vis.classList.remove('grid');
swiper.init(swiperOpts);
swiper.autoplay.start();

The slider comes back and autoplay works for one slide but then it quits working. My buttons don't work, keyboard navigation, pagination, mousewheel; none of that works. But clicking and dragging still works as well as touch navigation. I tried init() with and without the swiperOpts object and I've played with options for destroy() but it hasn't made a difference. I've also tried throwing in swiper.attachEvents() and swiper.update() for good measure but still without result. I can, of course, reload the page but I'd prefer to be able to switch back as seamlessly as possible. What am I missing?

Thanks

dev_willis
  • 530
  • 4
  • 6
  • 18
  • Try here: https://stackoverflow.com/questions/21538056/destroy-idangerous-swiper-if-window-is-resized-to-a-bigger-resolution-or-call-it -or- https://stackoverflow.com/questions/54594033/how-to-change-swipe-direction-in-swiper-js. Also in my tests, the destroy than init is buggy (Maybe it's better to create again new object instance). – Ezra Siton Apr 12 '20 at 23:19
  • Thanks! I think just creating it again is what I'll do. If you want to put that in an answer I'll accept it. :) – dev_willis Apr 13 '20 at 02:37
  • Does this answer your question? [How to change swipe direction in swiper.js?](https://stackoverflow.com/questions/54594033/how-to-change-swipe-direction-in-swiper-js) – doğukan Apr 20 '20 at 11:07
  • 1
    @dgknca no, not directly. But the workaround I used was similar. I never could make it work just by calling `init()` again but it works if I just create a new Swiper instance like so: `swiper = new Swiper(vis, swiperOpts);` – dev_willis Apr 21 '20 at 15:00

0 Answers0