Question

我希望能够通过按钮在滑块视图和网格视图之间切换。我从滑块视图开始，像这样初始化：

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');

一切正常。但是然后我重新初始化了，：

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

滑块再次出现，自动播放可播放一张幻灯片，但随后退出工作。我的按钮不起作用，键盘导航，分页，鼠标滚轮；这些都不起作用。但是单击和拖动仍然与触摸导航一样有效。我尝试过使用init()对象和不使用swiperOpts对象的情况，并且使用过destroy()的选项，但是并没有改变。我也尝试过将swiper.attachEvents()和swiper.update()扔进去，但仍然没有结果。我当然可以重新加载页面，但是我希望能够无缝切换回去。我想念什么？

谢谢

销毁后，如何重新初始化swiper.js实例？

0 个答案: