Как в 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
Проблема сделать слайдер с превьюшками как на скрине, т.е., закольцованный с активным в центре.