Как отделить кнопки prev и next при использовании нескольких swiper?

Question

[Pedronin]

https://codepen.io/get-web/embed/yLKjMpG?theme-id=...
Подскажите пожалуйста что не так, я сделал как как здесь но все равно все слайдеры листаются по клику на одну кнопку, всё дело именно в кнопках prev и next и их одинаковых классах

import Swiper, { Navigation, Pagination} from 'swiper';

Swiper.use([Navigation, Pagination]);

document.querySelectorAll('.swiper').forEach(el => {
  var swiper = new Swiper(el, {
    slidesPerView: 'auto',
  loop: true,
  centeredSlides: true,

  pagination: {
    el: ".swiper-pagination",
    clickable: true,
  },
  navigation: {
    nextEl: '.button-next',
    prevEl: '.button-prev',
  },
});
});

Comments

[Виталий Першин]

Вам уже дали ответ, но вы так и не смогли найти различия https://qna.habr.com/q/1249968#answer_2288858 и не нашли ничего лучше как создать еще один такой же вопрос

Answer 1

[Виталий Першин]

Вот код из примера, который я вам дал в прошлом вопросе:

pagination: {
			el: el.querySelector('.swiper-pagination'),
			clickable: true
		},
		 navigation: {
			  nextEl: el.querySelector('.swiper-arrow-next'),
			  prevEl: el.querySelector('.swiper-arrow-prev')
		 }

Вот ваш код:

pagination: {
    el: ".swiper-pagination",
    clickable: true,
  },
  navigation: {
    nextEl: '.button-next',
    prevEl: '.button-prev',
  },

Что еще нужно сделать, чтобы вы начали думать?

Comments

[Pedronin]

я думал но я правда не понимаю в чем проблема
думаю мне стоит отоспаться

[Виталий Першин]

Pedronin, 3 дня уже прошло. Я вам вырезал кусок, который отличается и вы все равно не видите разницу? Если за вас будут делать, вы ничему не научитесь.

[Pedronin]

естественно, я исам это понимаю, но все это время я другим занимался, на это времени еще не находил

Answer 2

[Lendwye]

Дайте каждому слайдеру уникальные селекторы (классы)

Comments

[Pedronin]

Вот так? Но это не работает я не понимаю.

import Swiper, { Navigation, Pagination} from 'swiper';

Swiper.use([Navigation, Pagination]);

const swiper1 = new Swiper('.swiper1', {
  loop: true,
  slidesPerView: 'auto',
  spaceBetween: 40,
  centeredSlides: true,
  // autoHeight: true,

  navigation: {
    nextEl: '.button-next',
    prevEl: '.button-prev',
  },

  pagination: {
    el: ".swiper-pagination",
    clickable: true,
  },
});

const swiper2 = new Swiper('.swiper2', {
  loop: true,
  slidesPerView: 'auto',
  spaceBetween: 40,
  centeredSlides: true,
  // autoHeight: true,

  navigation: {
    nextEl: '.button-next',
    prevEl: '.button-prev',
  },

  pagination: {
    el: ".swiper-pagination",
    clickable: true,
  },
});

[Lendwye]

Pedronin, у вас везде .button-next и .button-prev классы, поменяйте их тоже

[Lendwye]

Pedronin, и swiper-pagination тоже