Как сделать несколько одинаковых Swiper Slider слайдеров на странице?

Question

[z_u_l]

Есть два одинаковых связанных слайдера на странице. Когда листаешь - один, листается и другой. А нужно, чтобы каждый связанный слайдер работал сам по себе независимо от другого. Что тут не так?

Пример

Answer 1

[0xD34F]

document.querySelectorAll('.container').forEach(n => {
  const slider = new Swiper(n.querySelector('.product-slider'), {
    navigation: {
      nextEl: n.querySelector('.swiper-button-next'),
      prevEl: n.querySelector('.swiper-button-prev'),
    },
    spaceBetween: 10,
  });

  const thumbs = new Swiper(n.querySelector('.product-thumbs'), {
    spaceBetween: 5,
    centeredSlides: true,
    slidesPerView: 4,
    touchRatio: 0.2,
    slideToClickedSlide: true,
    direction: 'vertical',
  });

  slider.controller.control = thumbs;
  thumbs.controller.control = slider;
});

Comments

[z_u_l]

Спасибо!

[Александр Осадчий]

0xD34F Подскажите пожалуйста, у меня такой-же слайдер (только превь не вертикальные)

И при обновлении страницы он выглядит так:


То есть, у превью пустое место..крутить начинаешь - нормально все..если ставлю бесконечную прокрутку "loop: true" - то они начинают работать в разнобой - как это можно поправить?

document.querySelectorAll('.productItem').forEach(n => {
    const slider = new Swiper(n.querySelector('.product-top'), {
      navigation: {
        nextEl: n.querySelector('.swiper-button-next'),
        prevEl: n.querySelector('.swiper-button-prev'),
      },
      spaceBetween: 10,
    });

    const thumbs = new Swiper(n.querySelector('.product-thumbs'), {
      spaceBetween: 10,
      centeredSlides: true,
      slidesPerView: 'auto',
      touchRatio: 0.2,
      slideToClickedSlide: true,
      slidesPerView: 3,
    });

    slider.controller.control = thumbs;
    thumbs.controller.control = slider;
  });

[z_u_l]

Александр Осадчий, В swiper сейчас используется другой вариант связных слайдеров, попробуйте сделать по этому примеру https://github.com/nolimits4web/Swiper/blob/master... slider.controller.control вроде как устарели.

[Александр Осадчий]

z_u_l, супер - спасибо :)

[spasatelev]

А как сейчас будет выглядеть код? Сделал по аналогии - не работает вообще((

document.querySelectorAll('.productItem').forEach(n => {

 const thumbs = new Swiper(n.querySelector('.product-thumbs'), {
      spaceBetween: 10,
      centeredSlides: true,
      slidesPerView: 'auto',
      touchRatio: 0.2,
      slideToClickedSlide: true,
      slidesPerView: 3,
    });

    const slider = new Swiper(n.querySelector('.product-top'), {
      navigation: {
        nextEl: n.querySelector('.swiper-button-next'),
        prevEl: n.querySelector('.swiper-button-prev'),
      },
      spaceBetween: 10,
      thumbs: {
        swiper: n.querySelector('.product-thumbs'),
      }
    });

   

    slider.controller.control = thumbs;
    thumbs.controller.control = slider; - эти строки не нужны?
  });

[z_u_l]

spasatelev, Всё зависит от того, какую версию swiper вы используете, если 5.xx или 6.xx, то да, эти строки не нужны, в вашем случае должно быть что-то типа такого:

document.querySelectorAll('.productItem').forEach(n => {
    const thumbs = new Swiper(n.querySelector('.product-thumbs'), {
      spaceBetween: 10,
      centeredSlides: true,
      slidesPerView: 'auto',
      touchRatio: 0.2,
      slideToClickedSlide: true,
      slidesPerView: 3,
    });

    const slider = new Swiper(n.querySelector('.product-top'), {
      navigation: {
        nextEl: n.querySelector('.swiper-button-next'),
        prevEl: n.querySelector('.swiper-button-prev'),
      },
      spaceBetween: 10,
      thumbs: {
        swiper: thumbs
      }
    });
});

Т.е. вы передали в объект thumbs свойству swiper элемент, а не объект сайдера. Можете ознакомиться в документации https://swiperjs.com/api/#thumbs.

Есть также пример, попробуйте сделать исходя из него https://github.com/nolimits4web/Swiper/blob/master...

[spasatelev]

z_u_l, Да так тоже пробовал, у меня ничего не выходит. Так все работает если убрать объект thumbs, но чтобы связать слайдеры он нужен, поэтому когда добавляю его, то все ломается. Пришлось подключать вручную, по отдельности.

[Александр Осадчий]

0xD34F ..а не подскажите, как для этих слайдеров можно сделать destroy() ?

То есть, сейчас возникла ситуация - слайдеры нужны только на моб. версии - а на десктопе - destroy()

const breakpoint = window.matchMedia( '(min-width:992px)' );

(function() {
    'use strict';
    let portfolioSwiper;
    const breakpointCheckerTwo = function() {
        if ( breakpoint.matches === true ) {
            if ( portfolioSwiper !== undefined ) {
                portfolioSwiper.destroy( true, true )
            }
        } else if ( breakpoint.matches === false ) {
            return enableSwiperTwo();
        }

    };

    const enableSwiperTwo = function() {
        document.querySelectorAll('#portfolio_slider').forEach(n => {
            portfolioSwiper = new Swiper(n.querySelector('.slider-portfolio'), {
                slidesPerView: "1",
                spaceBetween: 30,
                paginationClickable: true,

                pagination: {
                    el: '.slider-portfolio .swiper-pagination',
                    clickable: true,
                },
            });
        });

    };

    breakpoint.addListener(breakpointCheckerTwo);
    breakpointCheckerTwo();
})();

Answer 2

[Ibishka]

Два одинаковых классов у слайдеров thumbs: product-thumbs