1

我希望能够使用按钮在滑块视图和网格视图之间切换。我从滑块视图开始，初始化如下：

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()取得很好的效果，但仍然没有结果。当然，我可以重新加载页面，但我希望能够尽可能无缝地切换回来。我错过了什么？

谢谢

4

0 回答 0