Две пагинации для слайдера Swiper?

Question

[Иван Гордиенко]

использую в проекте слайдер Swiper.js с использованием прогрессбара. И выглядит это так:



Хотелось бы реализовать так, чтобы верхнее меню являлось второй пагинацией для этого слайдера (на странице он один), пытался через решение добавочного класса с препиской к слайду, но не помогает.

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

Спасибо за помощь!

var swiper = new Swiper('.swiper-container', {
		mode:'horizontal',
		loop: false,
		pagination: {
			el: '.swiper-pagination',
			type: 'progressbar',
			clickable: true,
		},

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

Comments

[Алекс Глебов]

через api свипера
https://idangero.us/swiper/api/#methods

[Иван Гордиенко]

Алекс Глебов, slideTo?

Я понимаю, что звучит это глупо, но у меня не получается инициализировать своё меню для кнопок под слайдер.

Answer 1

[Салават Салахутдинов]

Через API Swiper такое невозможно, но можно сделать прогрессбар через API Swiper, а верхнее меню вручную
Допустим код вашего меню такой:

<ul class="swiper-menu">
    <li class="swiper-menu__item" data-index="0">Каталог продукции</li>
    <li class="swiper-menu__item" data-index="1">О нашей компании</li>
    <li class="swiper-menu__item" data-index="2">Контактная информация</li>
    <li class="swiper-menu__item" data-index="3">Категория</li>
 <ul>

Теперь через API Swiper меняем слайды при клике на элементы меню:

const mySwiper = new Swiper('swiper-container', {
   mode:'horizontal',
   loop: false,
   pagination: {
      el: '.swiper-pagination',
      type: 'progressbar',
      clickable: true,
   },

   navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
   },
})
$('.swiper-menu').on('click',  '.swiper-menu__item', function() {
   const index = $(this).data('index')
   mySwiper.slideTo(index)
});

Comments

[Иван Гордиенко]

Салават, спасибо, опробую и надеюсь - это и будет решением!

[Иван Гордиенко]

К сожалению, вариант не работает.

[Иван Гордиенко]

Очень странно, после 10 очистки кеша - сработало. Спасибо!