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

Question

Ион

swiper , javascript

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

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

Вот мой текущий код:

```javascript
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,
});
```

7 декабря 2023 г. 8:49

Ответы на вопрос 2

Похожие вопросы

Answer 1

Для реализации бесконечного thumbnail в swiper slider и настройки правильного порядка слайдов в превьюшке, вам понадобится задействовать несколько параметров Swiper.

Вот обновленный код, который поможет вам решить проблему:

```javascript
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: 'auto', // Для динамического определения количества видимых слайдов
  spaceBetween: 10,
  loop: true,
  slideToClickedSlide: true,
  centeredSlides: true,
  slideClass: 'gallery-swiper__thumb-item', // Нужно указать класс вашего слайда в previewSlider
  loopedSlides: mainSlider.slides.length, // Количество слайдов в mainSlider
  loopAdditionalSlides: 2, // Количество дополнительных добавляемых слайдов в previewSlider
  navigation: {
    nextEl: '.gallery-swiper--thumb-next',
    prevEl: '.gallery-swiper--thumb-prev',
  },
  on: {
    init: function () {
      var activeIndex = this.activeIndex;
      // При инициализации устанавливаем правильный initial slide в mainSlider
      mainSlider.slideToLoop(activeIndex);
    }
  }
});

previewSlider.controller.control = mainSlider; // Связываем previewSlider с mainSlider
mainSlider.controller.control = previewSlider; // Связываем mainSlider с previewSlider
```

Убедитесь, что вы указали правильный класс вашего слайда в `slideClass` параметре, чтобы превьюшки отображались в правильном порядке. Также убедитесь, что вы использовали правильные селекторы для навигационных кнопок в данном примере.

Этот код должен помочь вам реализовать бесконечный thumbnail в swiper slider и настроить правильный порядок слайдов в превьюшке.

Answer 2

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