Я хочу иметь возможность переключаться между ползунком и сеткой с помощью кнопки. Я начинаю с представления слайдера, инициализированного так:
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');
Все работает нормально. Но затем я повторно инициализирую, sic:
vis.classList.add('swiper-container');
vis.classList.remove('grid');
swiper.init(swiperOpts);
swiper.autoplay.start();
Ползунок возвращается, автовоспроизведение работает для одного слайда, но затем перестает работать. Мои кнопки не работают, навигация с клавиатуры, разбивка на страницы, колесо мыши; ничего из этого не работает. Но нажатие и перетаскивание по-прежнему работают так же, как сенсорная навигация. Я пробовал init()
с объектом swiperOpts
и без него, играл с параметрами для destroy()
, но это не помогло. Я также пробовал добавить swiper.attachEvents()
и swiper.update()
для хорошей меры, но все равно безрезультатно. Я, конечно, могу перезагрузить страницу, но я бы предпочел иметь возможность переключаться обратно как можно более плавно. Что мне не хватает?
Спасибо
init()
снова, но он работает, если я просто создаю новый экземпляр Swiper следующим образом:swiper = new Swiper(vis, swiperOpts);
- person dev_willis   schedule 21.04.2020