Swiper не работает адаптивность

проблема с опасным swiper с динамическим контентом

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

Вот как я инициализирую плагин

Высота контейнера-шпинделя составляет 100%

7 ответов

Я нашел решение, я добавил эту функцию, которую я вызываю после первой инициализации плагина

Это исправление было упомянуто в другом плагине, и когда я попробовал его с этим плагином, это сработало. Это связано с тем, что плагин не знает об изменениях, произошедших в DOM.

У меня есть решение без JS.

HTML

CSS

Следовательно, этот метод также будет работать для создания любого размера div так, как это делает изображение. Масштабирование его высоты с фиксированным соотношением сторон по ширине.

Волшебство заключается в том, что браузеры обрабатывают значения margin / padding% как процент от ширины элемента, даже если вы дополняете верх или низ указанного элемента.

Надеюсь это поможет!

Я просто хотел добавить, что у меня также были проблемы с настройкой Swiper для работы с динамически загружаемым контентом через ajax . Это совершенно очевидно, потому что контент еще не был загружен, когда был запущен Swiper. Я решил это, используя собственную функцию добавления Swiper вместо моей собственной. Это было в версии 3.3.1, и это исправило это для меня без необходимости использовать setTimeout() или что-то еще!

Я надеюсь, что это помогает некоторым нуждающимся людям!

Для адаптивного дизайна я вызываю следующий метод resizeFix

Обновлено для Изменения в документации Swiper, так как .reInit больше не является функцией.

Мое исправление для Swiper 3.x (я полагаю, что вышеперечисленные обложки 2.x)

Источник

Некорректная работа при многоразовой инициализации swiper slider`ов на сайте

Проблема заключается в том, что при смене слайда с помощью перемещения мышкой, работает только то выпадающее меню, которое было открыто первым. Прикладываю скрины:

1)Корректная работа первого открытого:

2) А это второе открытое, в той же сессии: (слайдер перестал прокручиваться до конца и исчезла нумерация страниц).

При всем этом, если пользоваться стрелочками для смены слайдов, то во всех случаях, работает правильно.

Если что, вот элементы для подключения swiper slider

Буду очень благодарен, если сможете помочь решить эту проблему, спасибо.

1 ответ 1

Удалось достичь некоторых успехов. В html разметке были добавлены data-id, чтобы можно было использовать их в качестве отдельных переменных для каждого слайдера:

Полностью отредактирован js:

Таким образом все слайдеры работают. Если убрать мышку с контента, то он автоматически переходит на первый слайд. При использовании другого слайдера с первым никаких проблем не возникает и наоборот тоже.

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

И еще вопрос. В мобильной версии, скролл мышкой работает только после того, как 1 раз нажмешь на контент или на любую из стрелочек, это возможно как-то пофиксить?

Источник

Слайдер Swiper для сайта — установка, использование, параметры

В наше время компьютеры стали мощной площадкой для продвижения своих товаров и услуг. Выигрывают самые нестандартные сайты. Это многофункциональные проекты, красивые, которые приятно посещать пользователю. Слайдер для сайта является одним из способов привлечь внимание посетителя сайта и заставить его посмотреть ваш товар или услугу. Вы можете разместить удобный мобильный слайдер на своем сайте. Вам не нужны серьёзные навыки программировании для этого.

Достаточно разместить готовый слайдер под названием Swiper, указать настройки и привлекать больше клиентов!

Свипер адаптирован под мобильные устройства — android, iOS, iPhone и других. Он прекрасно выглядит на больших и маленьких экранах. Слайдер Swiper сам занимается адаптацией, ему достаточно указать количество слайдеров для разного разрешения экрана. Для больших мониторов можно указать больше, для маленьких экранах, например, для мобильных телефонов, можно указать 1-2 слайда. Swiper имеет множество настроек, все они легко используются и хорошо документированы.

Ниже описаны способы подключения слайдера Swiper для сайта! Не стесняйтесь задавать вопросы в комментариях, нам приятно будет вам помочь!

Начало работы с Swiper

Десктопный и мобильный слайдер Swiper для сайта — установка, использование, параметры

1a. Загрузка и установка слайдера Swiper

Прежде всего, мы должны скачать необходимые файлы Swiper:

• Мы можем загрузить их из репозитория Swiper GitHub
• Или мы можем установить их через Bower, введите в терминал:
• Или, используя Atmosphere as Meteor package:
• Или, используя NPM

В загруженном / установленном пакете нам нужны файлы из dist/ папки.

Как использование Swiper из CDN

Если вы не хотите подключить Swiper к сайту, вы можете использовать его из Swiper на cdnjs . Доступны следующие файлы:

2. Включите файлы Swiper на сайт / приложение.

После этого нам нужно включить CSS и JS-файлы Swiper на наш сайт / приложение. В вашем html-файле:

3. Добавить Swiper HTML Layout

Теперь нам нужно добавить базовый макет Swiper в наше приложение:

4. Swiper CSS Styles / Size

После этого нам может потребоваться установить размер Swiper в файле CSS:

Инициализирование слайдера для сайта Swiper

Наконец, нам нужно инициализировать Swiper в JS (подключение к сайту). Есть несколько вариантов / мест для этого:

Лучший вариант будет в встроенном скрипте или в файле сценария, который включен в самый конец тела (прямо перед закрывающим

Источник