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

Question

[Алексей Пархоменко]

Есть лендинг страница, нужно прикрутить 4 слайдера. Все отлично работает, но при клике на стрелки срабатывают все слайдеры и переключаются все. Плюс настройки применяются для всех, а не для отдельно взятых.
Пробовал обращаться к классу .container-swiper через родительский класс, например -first, -second, .. slider,- не выходит так.

Answer 1

[Александр Зачиналов]

вам нужно создавать 4 переменные и присваивать для каждой создание и инициализацию конкретного слайдера

var slider1 = new Swiper ('.slider1', {
      loop: true
}) 
var slider2 = new Swiper ('.slider2', {
      loop: true
})

Comments

[Алексей Пархоменко]

Пожалуйста, поясните, то есть в моем случае вместо .swiper-conteiner подставлять свои значение slider1, slider2 ...?
Вот сама инициализация:

<script>
    var swiper = new Swiper('.swiper-container', {
        
        slidesPerView: 4,
        nextButton: '.swiper-button-next',
        prevButton: '.swiper-button-prev',
        spaceBetween: 0,
        loop: true,
        loopedSlides: 200
    });
    </script>

        <script>
    var swiper = new Swiper('.second-slider-main .swiper-container', {
        nextButton: '.swiper-button-next',
        prevButton: '.swiper-button-prev',
        slidesPerView: 4,
        slidesPerColumn: 2,
        spaceBetween: 0
    });
    </script>

    <script>
    var swiper = new Swiper('.reviews .swiper-container', {
        pagination: '.swiper-pagination',
        slidesPerView: 1,
        paginationClickable: true,
        spaceBetween: 30,
        loop: true
    });
    </script>

[Алексей Пархоменко]

Ну и соответственно поубирать родительские классы?!

[Александр Зачиналов]

вам в верстке надо совместно со slider-container дописать свои классы, условно да, slider1...2...3 и использовать свои классы в вызовах слайдеров, но slider-container в верстке не убирайте, на нем стандартные стили висят от этого плагина. В таком случае, да, родительские классы будут не обязательны.

[Александр Зачиналов]

только и переменные var в скрипте вызове должны быть разными, slider 1...2...3

[Алексей Пархоменко]

Александр Зачиналов: Спасибо. Но все равно работают синхронно.

Вот так вот обращаюсь

[Алексей Пархоменко]

<script>
    var swiper1 = new Swiper('.slider1', {
        
        slidesPerView: 4,
        nextButton: '.swiper-button-next',
        prevButton: '.swiper-button-prev',
        spaceBetween: 0,
        loop: true,
        loopedSlides: 200
    });
    </script>

        <script>
    var swiper2 = new Swiper('.slider2', {
        nextButton: '.swiper-button-next',
        prevButton: '.swiper-button-prev',
        slidesPerView: 4,
        slidesPerColumn: 2,
        spaceBetween: 0,
        loop: true,
        loopedSlides: 200
    });
    </script>

    <script>
    var swiper3 = new Swiper('.slider3', {
        slidesPerView: 4,
        nextButton: '.swiper-button-next',
        prevButton: '.swiper-button-prev',
        spaceBetween: 0,
        loop: true,
        loopedSlides: 4
    });
    </script>

    <script>
    var swiper4 = new Swiper('.slider4', {
        pagination: '.swiper-pagination',
        slidesPerView: 1,
        paginationClickable: true,
        spaceBetween: 30,
        loop: true,
        loopedSlides: 200
    });
    </script>

[Александр Зачиналов]

селекторы кнопок вперед/назад тоже нужно сделать уникальными для каждого слайдера, лучше по id, то есть nextButton: '.slider1 .swiper-button-next' и тд

[Александр Зачиналов]

*лучше по id, но можно и через родителя, то есть ... /*затерлось*/

[Алексей Пархоменко]

Александр Зачиналов: Вы очень мне помогли и на будущее будет. Спасибо Вам огромнейшое! Я разобрался!!!

[Александр Зачиналов]

Рад был помочь

[Артём]

Александр Зачиналов: На какое-то время нормально работало,а потом исчезло,в 1ом слайдере у меня 5 слайдов,во 2ом 15слайдов,вот код:

[Артём]

<script>
    var slider1 = new Swiper ('.slider1', {
        pagination: '.slider1 .swiper-pagination',
        nextButton: '.slider1 .swiper-button-next',
        prevButton: '.slider1 .swiper-button-prev',
        slidesPerView: 3,
        paginationClickable: true,
        spaceBetween: 30,
        autoplay: 2500,
        autoplayDisableOnInteraction: true,
        loop: true
        
    });
</script>
<script>
    var slider2 = new Swiper ('.slider2', {
        pagination: '.slider2 .swiper-pagination',
        nextButton: '.slider2 .swiper-button-next',
        prevButton: '.slider2 .swiper-button-prev',
        slidesPerView: 3,
        paginationClickable: true,
        spaceBetween: 30,
        autoplay: 2500,
        autoplayDisableOnInteraction: true,
        loop: true
        
    });
</script>

[Александр Зачиналов]

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

[Александр Зачиналов]

вот здесь 4 слайдера одновременно на странице и все идеально работает - cherniginskaya.ru

[Александр Зачиналов]

больше 4, и есть слайдер в слайдере

[Артём]

Александр Зачиналов: Так что мне делать,я приписал к класс slider1 и ко 2ому slider2

[Артём]

Александр Зачиналов: в 1 момент нормально всё работало,а потом навигация исчезла,вот сайт: starbuz2.ru

[Артём]

Александр Зачиналов: starbuz2.ru

[Александр Зачиналов]

у меня ваш сайт нормально работает, проблем не вижу, оба слайдера как часы (последний Хром)

[Артём]

Александр Зачиналов: и навигационное меню есть?

[Александр Зачиналов]

нет, меню не вижу,но причем оно здесь? и давайте закроем обсуждение вашего проекта, не будем лишний раз отвлекать автора вопроса... если у вас есть конкретная проблема, создайте свой вопрос, я обязательно в нем поучаствую

[Артём]

Александр Зачиналов: Как сделать 2 слайдера Swiper?

Answer 2

[v1adimirbezrukov]

Если есть Jq.
В моем случае навигация должна была располагаться вне слайдера и таких слайдеров несколько на странице.
Настройки конечно же свои нужно ставить.

<div class="catalog-common__main-slider">
              <div class="swiper-container catalog-common__slider">
                <div class="swiper-wrapper">
                  <div class="swiper-slide hit__item"></div>
                  <div class="swiper-slide hit__item"></div>
                 <div class="swiper-slide hit__item"></div>
                 <div class="swiper-slide hit__item"></div>
                 <div class="swiper-slide hit__item"></div>
                </div>
              </div>
              <div class="swiper-button-next"><img src="images/catalog-common-arrow-next.svg" alt="" /></div>
              <div class="swiper-button-prev"><img src="images/catalog-common-arrow-prev.svg" alt="" /></div>
            </div>

$('.swiper-container').each(function (i) {
    i++;
    var i = new Swiper(this, {
      slidesPerView: 3.4,
      spaceBetween: 20,
      navigation: {
        nextEl: $(this).parent().find('.swiper-button-next')[0],
        prevEl: $(this).parent().find('.swiper-button-prev')[0],
      },
      breakpoints: {
        0: {
          slidesPerView: 1.4,
        },
        768: {
          slidesPerView: 3.25,
          spaceBetween: 12,
        },
        992: {
          slidesPerView: 2.4,
        },
        1401: {
          slidesPerView: 3.4,
        },
      },
    });
  });