Как сделать несколько галерей на одной странице через Swiper?

Question

[spasatelev]

Доброго времени суток!
Ситуация такова: Есть один большой слайдер из 3 слайдов, внутри каждого есть галерея. Дело в том что все работает, когда не прописываешь thumbs (закомментировано внизу). Делаю все через npm, все подключил необходимое
Выводит ошибку: Cannot read property '$el' of null | thumbs.js:32

const galleryThumbs = new Swiper('.main-thumbs', {
    slidesPerView: 3,
    spaceBetween: 20,
    loop: true, 
    centeredSlides: true,
  });

const mainTopSlider = new Swiper('.feedback__main-top', {
    slidesPerView: 1,
    loop: true,
    effect: 'fade',
        fadeEffect: {
          crossFade: true
        },

      centeredSlides: true,
        
      // speed: 1500,
      //   autoplay: {
      //     delay: 2000,
      //     disableOnInteraction: false,
      // },
      
      navigation: {
        nextEl: '.main-thumbs-next',
        prevEl: '.main-thumbs-prev',
      },

    //   thumbs: {
    //     swiper: galleryThumbs,
    //     slidesPerView: 3,
    //   },

    });

Answer 1

[Александр]

thumbs: {
    swiper: {
      el: '.main-thumbs',
      slidesPerView: 3
    }
  }

или

thumbs: {
       swiper: galleryThumbs
      }

Comments

[spasatelev]

По идеи тоже самое что и раскомментировать, это не помогает. Та же самая ошибка

[Александр]

spasatelev, нет, не то же самое.

у объекта thumbs нет свойства slidesPerView. это свойство есть у объекта swiper.

[spasatelev]

Пишет такую ошибку: Cannot read property 'addClass' of undefined | thumbs.js:32
На этой строке подчеркивает
swiper.thumbs.swiper.$el.addClass(swiper.params.thumbs.thumbsContainerClass

[Александр]

spasatelev, сколько у вас элементов на странице с классом .main-thumbs?

[spasatelev]

Есть один большой слайдер из 3 слайдов, внутри каждого слайда есть галерея(оно из двух слайдеров - '.feedback__main-top' и '.main-thumbs', которое по коду связывается через thumbs), по этому фрагменту кода, что выше. Всего их 3 (.main-thumbs) получается.

[spasatelev]

spasatelev, Через console.log выдало 5

[Александр]

вот, посмотрите пример. вам нужно пройтись циклом по элементам большого слайдера и инициализировать внутренние слайдеры в цикле.