Форум Сайтостроение Веб-строительство

Swiper JS - 2 слайдера на странице

12
S
На сайте с 24.08.2015
Offline
76
samdo
2000

Коллеги, приветствую! Подскажите по проблеме, что-то я в тупике( У меня есть два слайдера на одной странице. Первый работает нормально, а вот на втором не работают миниатюры, они не двигаются вместе с основным слайдером. К тому же, на этом же втором слайдере не работает прокрутка и стрелки навигации.

<script>
    var swiper = new Swiper(".mySwiper", {
      spaceBetween: 10,
      slidesPerView: 4,
      freeMode: true,
      watchSlidesProgress: true,
    });
    var swiper2 = new Swiper(".mySwiper2", {
      spaceBetween: 10,
      navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
      },
      thumbs: {
        swiper: swiper,
      },
    });
        var swiper3 = new Swiper(".mySwiper3", {
      spaceBetween: 10,
      slidesPerView: 4,
      freeMode: true,
      watchSlidesProgress: true,
    });
    var swiper4 = new Swiper(".mySwiper4", {
      spaceBetween: 10,
      navigation: {
        nextEl: ".sec-slider-next",
        prevEl: ".sec-slider-prev",
      },
      thumbs: {
        swiper: swiper3,
      },
    });
</script>

Заранее спасибо!


W1
На сайте с 22.01.2021
Offline
297
webinfo
#1
samdo :
не работает прокрутка и стрелки навигации

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

Мой форум - https://webinfo.guru –Там я всегда на связи
S
На сайте с 24.08.2015
Offline
76
samdo
#2
webinfo #:

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

Селекторы разные вообще-то)

скрин

M
На сайте с 17.06.2021
Offline
72
makepuff
#3
samdo #:

Селекторы разные вообще-то)


так это не весь js, могу ошибаться, но скорее всего надо залазить в сам swiper, там как бы тоже эти классы задействованы 
https://gist.github.com/evdeveloper/1088d642672f5d28d9c6aa94bb95364b

хотя судя по кодепину мультиплай уже зашили
https://codepen.io/search/pens?q=Multiple+SwiperJS

Bybit крипто биржа https://partner.bybit.com/b/58507 /// Зарубежные VPS с оплатой РФ картами https://aeza.net/?ref=416422 (+15% к пополнению) //// Обучаем нейронки на сайте https://f4ck41.fun/
W1
На сайте с 22.01.2021
Offline
297
webinfo
#4
samdo #:
Селекторы разные вообще-то

Прошу прощения. Померещилось. По ночам, наверное, спать всё же надо :(

Может быть, в HTML-коде ошибка. В комплексе смотреть надо.

S
На сайте с 24.08.2015
Offline
76
samdo
#5

В консоли вот такая ошибка

скрин

M
На сайте с 17.06.2021
Offline
72
makepuff
#6
samdo #:

В консоли вот такая ошибка


ты из кодепина код не можешь взять?(

или занеси его туда, чтобы нормально посмотреть можно было

M
На сайте с 17.06.2021
Offline
72
makepuff
#7
/*all swiper slides*/

let allSwiperSlides = document.querySelectorAll(".swiper-slides");

allSwiperSlides.forEach(allSwiperSlidesFunc);

function allSwiperSlidesFunc(ele,index){
   let swiperButtonNext = ele.querySelector(".swiper-button-next");
   let swiperButtonPrev = ele.querySelector(".swiper-button-prev");
   swiperButtonNext.classList.add(`swiper-button-next${index + 1}`);
   swiperButtonPrev.classList.add(`swiper-button-prev${index + 1}`);
}

    <!-- Initialize Swiper -->

      // slider 1 ===================================================
      var swiperSlide1Thumbs = new Swiper(".mySwiper1Thumbs", {
        loop: true,
        spaceBetween: 10,
        slidesPerView: 4,
        freeMode: true,
        watchSlidesProgress: true,
      });
      var swiperSlide1 = new Swiper(".mySwiper1", {
        loop: true,
        spaceBetween: 10,
        navigation: {
          nextEl: ".swiper-button-next1",
          prevEl: ".swiper-button-prev1",
        },
        thumbs: {
          swiper: swiperSlide1Thumbs,
        },
      });

      // slider 2 ==================================================

      var swiperSlide2Thumbs = new Swiper(".mySwiper2Thumbs", {
        loop: true,
        spaceBetween: 10,
        slidesPerView: 4,
        freeMode: true,
        watchSlidesProgress: true,
      });
      var swiperSlide2 = new Swiper(".mySwiper2", {
        loop: true,
        spaceBetween: 10,
        navigation: {
          nextEl: ".swiper-button-next2",
          prevEl: ".swiper-button-prev2",
        },
        thumbs: {
          swiper: swiperSlide2Thumbs,
        },
      });
      // slider 3 ==============================================================

      var swiperSlide3Thumbs = new Swiper(".mySwiper3Thumbs", {
        loop: true,
        spaceBetween: 10,
        slidesPerView: 4,
        freeMode: true,
        watchSlidesProgress: true,
      });
      var swiperSlide2 = new Swiper(".mySwiper3", {
        loop: true,
        spaceBetween: 10,
        navigation: {
          nextEl: ".swiper-button-next3",
          prevEl: ".swiper-button-prev3",
        },
        thumbs: {
          swiper: swiperSlide3Thumbs,
        },
      });
M
На сайте с 17.06.2021
Offline
72
makepuff
#8
у тебя используется что-то типа https://cdnjs.cloudflare.com/ajax/libs/Swiper/6.8.4/swiper-bundle.min.js
и без этой ссылки как нам понять в чем проблема
S
На сайте с 24.08.2015
Offline
76
samdo
#9
makepuff #:
у тебя используется что-то типа https://cdnjs.cloudflare.com/ajax/libs/Swiper/6.8.4/swiper-bundle.min.js
и без этой ссылки как нам понять в чем проблема
Тот, кто знает swiper - прекрасно поймет. У меня используется самый стандартный вариант без всякой кастомизации. Вот этот: https://swiperjs.com/demos/300-thumbs-gallery/core
Sevix
На сайте с 24.10.2011
Offline
93
Sevix
#10

А если так?

<script>
var swiper_1 = new Swiper("#mySwiper1", {
    // ...
}
</script>
<script>
var swiper_2 = new Swiper("#mySwiper2", {
    // ...
}
</script>
12

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий