Как сделать что бы Swiper с одинаковыми классами работали от одного скрипта?

Question

[Greeg Zagrelov]

Есть много слайдеров на 1 странице с одинаковыми классами, как сделать что бы они все работали? выдает ошибку swiper.esm.bundle.js:7539 Uncaught TypeError: Cannot read properties of null (reading '$el')

import Swiper from "swiper";
document.addEventListener("DOMContentLoaded", () => {

  const swiper2 = new Swiper(".mySwiper3", {
    loop: true,
    spaceBetween: 30,
    slidesPerView: 4,
    freeMode: true,
    watchSlidesProgress: true,
    observer: true,
    observeParents: true,
  });

  const swiper1 = new Swiper(".mySwiper2", {
    loop: true,
    spaceBetween: 10,
    observer: true,
    observeParents: true,
    navigation: {
      nextEl: ".swiper-button-next",
      prevEl: ".swiper-button-prev",
    },
    thumbs: {
      swiper: swiper2,
    },
  });
});

Answer 1

[Александр Талалаев]

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

//Получим все ноды у которых есть класс swiper
let swiperNodes = document.getElementsByClassName("swiper");
//Пройдемся по ним и повесим свайпер
for (let i = 0; i < swiperNodes.length; i++) {
   new Swiper(swiperNodes[i] , {
     speed: 400,
     spaceBetween: 100,})
//...
}

Ну примерно так.

Comments

[Greeg Zagrelov]

Спасибо, попробую.

[Greeg Zagrelov]

Где то допущена ошибка?
страница не загружается.

let mySwiper3 = document.querySelectorAll(".mySwiper3");
  let mySwiper2 = document.querySelectorAll(".mySwiper2");

  for (let i = 0; i < mySwiper3.length; i++) {
    const swiper2 = new Swiper(mySwiper3[i], {
      loop: true,
      spaceBetween: 30,
      slidesPerView: 4,
      freeMode: true,
      watchSlidesProgress: true,
      observer: true,
      observeParents: true,
    });
    for (let j = 0; j < mySwiper2.length; j++) {
      const swiper1 = new Swiper(mySwiper2[j], {
        loop: true,
        spaceBetween: 10,
        observer: true,
        observeParents: true,
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
        thumbs: {
          swiper: swiper2,
        },
      });
    }
  }

[Александр Талалаев]

Greeg Zagrelov, смотрите вы внутрь цикла поместили объявление константы и переназначаете её постоянно
const swiper2 и const swiper1
Вам тогда нужно объявить их до циклов и сделать массивами.
Например
//обратим внимание, массивы константы, а их элемнты нет
const swipers1 = []
и далее

for (let i = 0; i < mySwiper3.length; i++) {
    const swipers1[i] = new Swiper(...)
}

[Александр Талалаев]

Greeg Zagrelov, далее чтобы обратиться к конкретному экземпляру swiper, то
swipers1[1].slideNext();
Либо, можно обращаться через выделения уникального DOM элемента

const swiperFoo = document.querySelector('#foo').swiper;
swiperFoo.slideNext()

[Greeg Zagrelov]

Александр Талалаев, Спасибо