Как я могу повторно инициализировать экземпляр swiper. js после его уничтожения? - PullRequest
Новая
       82

Как я могу повторно инициализировать экземпляр swiper. js после его уничтожения?

0 голосов
/ 12 апреля 2020

Я хочу иметь возможность переключаться между видом слайдера и видом сетки с помощью кнопки. Я начинаю с представления ползунка, инициализируемого так: 

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)

Я переключаюсь в вид сетки через: 

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

Все это прекрасно работает. Но затем я повторно инициализирую, si c: 

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

Ползунок возвращается, и автозапуск работает для одного слайда, но затем он перестает работать. У меня не работают кнопки, навигация с помощью клавиатуры, пагинация, колесико мыши; ничего из этого не работает. Но нажатие и перетаскивание по-прежнему работает так же, как сенсорная навигация. Я пробовал init() с и без объекта swiperOpts, и я играл с опциями для destroy(), но это не имело значения. Я также попытался добавить swiper.attachEvents() и swiper.update() для хорошей меры, но все еще безрезультатно. Я могу, конечно, перезагрузить страницу, но я бы предпочел иметь возможность переключаться обратно как можно более плавно. Чего мне не хватает?

Спасибо

...