Swiper с неродственными слайдами

#javascript #swiper

#javascript #swiper.js

Вопрос:

Я использую swiper в качестве слайдера для моего мобильного просмотра. В принципе, divs, которые я хотел бы применить swiper-slide к классу, не являются братьями и сестрами друг друга.

Вот пример скрипта для демонстрации моего варианта использования: https://jsfiddle.net/2prcosmk /

Всякий раз, когда я пытаюсь использовать swiper таким образом, первый слайд отображается правильно, но я не могу выполнить фактическое перемещение с первого на любые другие слайды (как это очевидно в демонстрационной скрипке при попытке переместить ползунок). Интересно, возможно ли это. Я не могу реально реорганизовать свой html, поскольку у меня есть несколько карточек в нескольких столбцах, поэтому каждая из этих карточек станет одним слайдом, как и весь заголовок.

Можете ли вы предоставить здесь какое-либо предложение или какой-либо указатель на образец кода, который я поместил? Спасибо!

Обновление: я попытался вложить классы swiper-* в https://jsfiddle.net/2prcosmk/2 / и это действительно создает swipers, но вложенное содержимое swiper просто не отображается. Если я создаю внутренний swiper direction: 'horizontal' , он создает вертикальный swiper внутри горизонтального swiper, как и ожидалось, но horizontal внутри horizontal , похоже, не работает.

Ответ №1:

Ближайшее, что я мог сделать, это использовать nested: true и direction: 'horizontal' во внутреннем swiper. Вот в чем проблема:https://jsfiddle.net/2prcosmk/3 / . Одной из проблем, вероятно, была бы настройка разбивки на страницы, поэтому, если кто-нибудь может ответить, как мы можем объединить две разбивки на страницы, это было бы потрясающе, но на данный момент этого достаточно.