Как в swiper slider сделать бесконечный thumbnail?

Question

[denism300]

Как сделать, чтобы превьюшка выглядела как на картинке? Пробовал по разному, но слева от первого слайде при инициализации всегда пусто, а надо, чтобы там был последний слайд, еще левее предпоследний и т.п.
Версия swiper 11.0.5
ChatGPT ничем не помог.

var mainSlider = new Swiper('.gallery-swiper', {
                            loop: true,
                            slidesPerView: 1,
                            spaceBetween: 10,
                            navigation: {
                                nextEl: '.swiper-button-next',
                                prevEl: '.swiper-button-prev',
                            },
                            pagination: {
                                el: '.swiper-pagination',
                                clickable: true,
                            },
                        });

                        var previewSlider = new Swiper('.gallery-swiper--thumb', {
                            slidesPerView: 5,
                            spaceBetween: 10,
                            centeredSlides: true,
                            loop: true,
                            slideToClickedSlide: true,
                        });

Comments

[Алексей Уколов]

ChatGPT ничем не помог.

Какая неожиданность, надо же.

[denism300]

Алексей Уколов, а что плохого обратиться за помощью к ИИ? Это, как минимум, быстрее, чем спросить тут или на StackOverflow.

[Алексей Уколов]

denism300, плохого ничего нет, но нам совершенно необязательно знать о том, что генератор текста вам не выдал
адекватного решения - редко бывает иначе.

[denism300]

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

[Модератор]

Помогаю вам в будущем не засорять вопросы ненужной информацией.

[Danny Arty]

А можете показать пример на Codepen? Сколько у вас всего слайдов в нижнем? Почему решили указать slidesPerVIew-5, если на скрине их меньше? Вопрос связан только с нижним слайдом? Просто не вижу их связи с верхним

[denism300]

Danny Arty,
пример тут: https://codepen.io/denis-mukhin/pen/LYqqrXg
скрин для общего понимания, как должно быть.

[Ankhena]

denism300, у вас проблемы с шириной нижних слайдов, придерживайтесь одной логики и всё будет хорошо. Можете проверить, начав с удаления max-width

Answer 1

[Clutkaboltwm]

Как минимум вам их нужно связать между собой.

Comments

[denism300]

Они связаны. https://codepen.io/denis-mukhin/pen/LYqqrXg
Проблема сделать слайдер с превьюшками как на скрине, т.е., закольцованный с активным в центре.

Answer 2

[salomatin]

Я понимаю что наверное поздно уже, но может кому поможет.

1) Обязательно используйте Swiper не ниже 6.8.4 (я использовал именно версию 6.8.4)
Пример нашел тут, он почти совпадает с тем что требовалось в вопросе, только стили подкорректировать https://codepen.io/intotheprogram/pen/PowvWeX

<div class="gallery"> 
				<div class="swiper swiper-container gallery-thumbs">
					<div class="swiper-wrapper">
						<div class="swiper-slide"><img src="https://into-the-program.com/demo/images/sample010.jpg" alt=""></div>
						<div class="swiper-slide"><img src="https://into-the-program.com/demo/images/sample005.jpg" alt=""></div>
						<div class="swiper-slide"><img src="https://into-the-program.com/demo/images/sample012.jpg" alt=""></div>
						<div class="swiper-slide"><img src="https://into-the-program.com/demo/images/sample007.jpg" alt=""></div>
						<div class="swiper-slide"><img src="https://into-the-program.com/demo/images/sample008.jpg" alt=""></div>
						<div class="swiper-slide"><img src="https://into-the-program.com/demo/images/sample009.jpg" alt=""></div>
					</div>
				</div>
				<div class="swiper swiper-container gallery-slider">
					<div class="swiper-wrapper">
						<div class="swiper-slide"><img src="https://into-the-program.com/demo/images/sample010.jpg" alt=""></div>
						<div class="swiper-slide"><img src="https://into-the-program.com/demo/images/sample005.jpg" alt=""></div>
						<div class="swiper-slide"><img src="https://into-the-program.com/demo/images/sample012.jpg" alt=""></div>
						<div class="swiper-slide"><img src="https://into-the-program.com/demo/images/sample007.jpg" alt=""></div>
						<div class="swiper-slide"><img src="https://into-the-program.com/demo/images/sample008.jpg" alt=""></div>
						<div class="swiper-slide"><img src="https://into-the-program.com/demo/images/sample009.jpg" alt=""></div>
					</div>
					<div class="swiper-button-prev"></div>
					<div class="swiper-button-next"></div>
				</div>
			</div>

var slider = new Swiper ('.gallery-slider', {
			slidesPerView: 1,
			centeredSlides: true,
			loop: true,
			loopedSlides: 3, 
			navigation: {
				nextEl: '.swiper-button-next',
				prevEl: '.swiper-button-prev',
			},
		});

		var thumbs = new Swiper ('.gallery-thumbs', {
			slidesPerView: 3,
			spaceBetween: 60,
			centeredSlides: true,
			loop: true,
			slideToClickedSlide: true,
		});

		slider.controller.control = thumbs;
		thumbs.controller.control = slider;

В моем примере миниатюры по 3 шт в ряд, и галерея после миниатюр. Но код точно рабочий, думаю под ваши нужды не составит труда допилить. Главное что при переключении слайдов или миниатюр, выбирается центральная и все корректно работает