Как можно создать несколько одинаковых галерей слайдеров swiper Thumbs на одной странице?

Question

Авдей

html , javascript , swiper , css

Как можно создать несколько одинаковых галерей слайдеров swiper Thumbs на одной странице?

Как сделать несколько одинаковых слайдеров Swiper Thumbs gallery на странице и настроить взаимодействие между ними так, чтобы при клике на изображение в одном слайдере изменялось изображение в другом слайдере? Текущий код работает для первого слайдера, но для остальных слайдеров не происходит изменения изображений при клике.

3 мая 2024 г. 15:50

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

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

Answer 1

Для создания нескольких одинаковых галерей слайдеров swiper Thumbs на одной странице и настройки взаимодействия между ними можно использовать следующий подход:

1. У каждого слайдера должен быть уникальный класс или ID, чтобы можно было обращаться к ним отдельно.
2. Необходимо добавить обработчики событий на клик по изображению в каждом слайдере, чтобы при клике менять изображение в других слайдерах.

Пример кода:

HTML:
```html
<div class="swiper-container gallery-top">
    <div class="swiper-wrapper">
        <!-- Слайды для первого слайдера -->
    </div>
</div>

<div class="swiper-container gallery-top">
    <div class="swiper-wrapper">
        <!-- Слайды для второго слайдера -->
    </div>
</div>

<div class="swiper-container gallery-top">
    <div class="swiper-wrapper">
        <!-- Слайды для третьего слайдера -->
    </div>
</div>

<div class="swiper-container gallery-thumbs">
    <div class="swiper-wrapper">
        <!-- Слайды thumbs для всех слайдеров -->
    </div>
</div>
```

JavaScript:
```javascript
var galleryTop1 = new Swiper('.gallery-top1', {
    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
    },
});

var galleryTop2 = new Swiper('.gallery-top2', {
    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
    },
});

var galleryTop3 = new Swiper('.gallery-top3', {
    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
    },
});

var galleryThumbs = new Swiper('.gallery-thumbs', {
    spaceBetween: 10,
    slidesPerView: 4,
    freeMode: true,
    watchSlidesVisibility: true,
    watchSlidesProgress: true,
});

galleryTop1.controller.control = galleryThumbs;
galleryTop2.controller.control = galleryThumbs;
galleryTop3.controller.control = galleryThumbs;

galleryThumbs.on('click', function () {
   galleryTop1.slideTo(galleryThumbs.clickedIndex);
   galleryTop2.slideTo(galleryThumbs.clickedIndex);
   galleryTop3.slideTo(galleryThumbs.clickedIndex);
});
```

В данном примере создаются три слайдера swiper для изображений (galleryTop1, galleryTop2, galleryTop3) и один слайдер для thumbs (galleryThumbs). Далее устанавливается контроль каждого из главных слайдеров над thumbs слайдером, чтобы при клике на изображение thumbs менялось изображение в главном слайдере.