Почему Swiper некорректно работает при изменении размера окна?
При изменении окна браузера второй слайдер ведёт себя неадекватно.
Пример: https://codepen.io/a22432/pen/JjVNbPz
В чём может быть проблема?
Подскажите как это можно исправить?
Дополнительно:
Свойство loop попробуй убрать.
new Swiper(".mySwiper2", { loop: true, pagination: { el: ".pg2", dynamicBullets: true, }, }) var swiper = new Swiper(".mySwiper", { -- loop: true, spaceBetween : '5px', pagination: { el: ".pg1", dynamicBullets: true, }, breakpoints : { 0: { slidesPerView: 2, }, 800: { slidesPerView: 3, }, 1200: { slidesPerView: 4, }, 1600: { slidesPerView: 5, } }, }); |
new Swiper(".mySwiper2", { loop: true, pagination: { el: ".pg2", dynamicBullets: true, }, }) var swiper = new Swiper(".mySwiper", { -- loop: true, spaceBetween : '5px', pagination: { el: ".pg1", dynamicBullets: true, }, breakpoints : { 0: { slidesPerView: 2, }, 800: { slidesPerView: 3, }, 1200: { slidesPerView: 4, }, 1600: { slidesPerView: 5, } }, });
- Да действительно, печально что c loop не работает
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Swiper - это популярная библиотека для создания слайдеров на веб-сайтах. Она обеспечивает возможность легкого создания адаптивных слайдеров с поддержкой сенсорных устройств.
Если Swiper некорректно работает при изменении размера окна, это может быть вызвано несколькими факторами. Вот несколько возможных причин и способы их решения:
1. Неправильное инициализация Swiper: Убедитесь, что вы правильно инициализировали Swiper в вашем коде. Проверьте, что у вас правильно указаны параметры слайдера, такие как slidesPerView, breakpoints и другие.
var mySwiper = new Swiper('.swiper-container', { slidesPerView: 1, spaceBetween: 10, breakpoints: { 768: { slidesPerView: 2 } } });
2. Не учитывается изменение размера окна: Для того чтобы Swiper корректно работал при изменении размера окна, необходимо обновлять слайдер после каждого изменения размера окна. Для этого можно использовать событие resize и метод update():
window.addEventListener('resize', function() { mySwiper.update(); });
3. Проблемы с CSS: Иногда проблемы с отображением Swiper могут быть вызваны некорректными стилями CSS. Убедитесь, что у вас правильно настроены стили для Swiper и что они не конфликтуют с другими стилями на вашем сайте.
4. Использование сенсорных устройств: Если вы тестируете Swiper на устройствах с сенсорным экраном, убедитесь, что вы правильно настроили опции touchRatio и touchAngle для обеспечения правильного поведения слайдера на таких устройствах.
Если после выполнения этих шагов проблема с Swiper все еще остается, рекомендуется обратиться к документации по библиотеке или задать вопрос на форуме поддержки.