Почему не работает swiper js?
Приветствую... нужна ваша помощь!
У меня получается слайдер в слайдере, на первом слайде внутренний слайдер работает, но на других слайдах, внутренний не работает
вот запуск слайдеров
// Внутренний маленький var swiper6 = new Swiper(".clients__sl-small", { spaceBetween: 6, slidesPerView: 6, allowTouchMove: false, observer: true, observeSlideChildren: true, observeParents: true, breakpoints: { 768: { spaceBetween: 12, }, }, }); // Внутренний большой связанный с маленьким var swiper7 = new Swiper(".clients__sl-big", { loop: true, spaceBetween: 0, slidesPerView: 1, allowTouchMove: false, observer: true, observeSlideChildren: true, observeParents: true, navigation: { nextEl: ".swiper-button-next1", prevEl: ".swiper-button-prev1", }, thumbs: { swiper: swiper6, }, }); // Основной слайдер var swiper = new Swiper(".clients__sl", { loop: true, spaceBetween: 0, slidesPerView: 1, observer: true, observeSlideChildren: true, observeParents: true, pagination: { el: ".swiper-pagination", clickable: true, }, navigation: { nextEl: ".swiper-button-next", prevEl: ".swiper-button-prev", }, breakpoints: { 768: { allowTouchMove: false, }, }, }); |
// Внутренний маленький var swiper6 = new Swiper(".clients__sl-small", { spaceBetween: 6, slidesPerView: 6, allowTouchMove: false, observer: true, observeSlideChildren: true, observeParents: true, breakpoints: { 768: { spaceBetween: 12, }, }, }); // Внутренний большой связанный с маленьким var swiper7 = new Swiper(".clients__sl-big", { loop: true, spaceBetween: 0, slidesPerView: 1, allowTouchMove: false, observer: true, observeSlideChildren: true, observeParents: true, navigation: { nextEl: ".swiper-button-next1", prevEl: ".swiper-button-prev1", }, thumbs: { swiper: swiper6, }, }); // Основной слайдер var swiper = new Swiper(".clients__sl", { loop: true, spaceBetween: 0, slidesPerView: 1, observer: true, observeSlideChildren: true, observeParents: true, pagination: { el: ".swiper-pagination", clickable: true, }, navigation: { nextEl: ".swiper-button-next", prevEl: ".swiper-button-prev", }, breakpoints: { 768: { allowTouchMove: false, }, }, });
подскажите пожалуйста, как это исправить
Дополнительно:
Потому что инициализируются только первые внутренние слайдеры - те, что в первом слайде.
Вам нужно инициализировать все, используется each (если jquery), или forEach (если нативный js)
Ответы:
Каждый слайдер заключить в отдельный тег script
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для того чтобы понять, почему возникает проблема с работой Swiper JS, необходимо проанализировать несколько возможных причин и проверить следующие аспекты:
1. Подключение библиотеки Swiper JS. Убедитесь, что вы правильно подключили файлы библиотеки Swiper JS в ваш проект. Проверьте пути к файлам и убедитесь, что они доступны из вашего HTML файла.
<link rel="stylesheet" href="path/to/swiper.min.css"> <script src="path/to/swiper.min.js"></script>
2. Инициализация Swiper. Убедитесь, что вы правильно инициализировали Swiper на вашем элементе. Убедитесь, что вы используете правильные классы и параметры инициализации.
var mySwiper = new Swiper('.swiper-container', { // настройки swiper });
3. Проверка HTML разметки. Убедитесь, что ваша HTML разметка правильно структурирована и содержит необходимые классы для Swiper слайдов и контейнера.
<div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide">Слайд 1</div> <div class="swiper-slide">Слайд 2</div> <div class="swiper-slide">Слайд 3</div> </div> </div>
4. Проверка конфликтов с другими скриптами. Иногда возникают проблемы из-за конфликтов между различными скриптами на странице. Убедитесь, что нет ошибок в консоли браузера и что другие скрипты не мешают работе Swiper.
Если после выполнения всех этих шагов проблема все еще не решена, попробуйте создать минимальный пример кода (codepen, jsfiddle и т. д.), чтобы другие разработчики могли помочь вам найти и исправить проблему.