Как создать аналогичный слайдер?

Я пытаюсь объединить два слайдера Swiper, но сталкиваюсь с проблемой: последний слайд не становится активным при инициализации. Он становится активным только после события click(), но в этом случае класс активного слайда не добавляется. Как можно решить эту проблему?
  • 14 ноября 2024 г. 12:03
Ответы на вопрос 1
Чтобы решить проблему с инициализацией слайдера Swiper и сделать так, чтобы последний слайд становился активным при старте, вам нужно настроить параметры инициализации слайдера правильно. Я приведу пример кода, который поможет вам объединить два слайдера Swiper и сделать так, чтобы последний слайд был активным.

Предположим, у вас уже есть HTML-разметка для двух слайдеров Swiper.

```html
<div class="swiper-container first-slider">
    <div class="swiper-wrapper">
        <div class="swiper-slide">Слайд 1</div>
        <div class="swiper-slide">Слайд 2</div>
        <div class="swiper-slide">Слайд 3</div>
    </div>
    <div class="swiper-pagination"></div>
</div>

<div class="swiper-container second-slider">
    <div class="swiper-wrapper">
        <div class="swiper-slide">Слайд A</div>
        <div class="swiper-slide">Слайд B</div>
        <div class="swiper-slide">Слайд C</div>
    </div>
    <div class="swiper-pagination"></div>
</div>
```

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

```javascript
const firstSlider = new Swiper('.first-slider', {
    // Настройки первого слайдера
    initialSlide: 2, // Задайте индекс последнего слайда (например, 2 для третьего слайда)
    loop: true,
    pagination: {
        el: '.first-slider .swiper-pagination',
        clickable: true,
    },
    on: {
        init: function () {
            this.slideTo(this.slides.length - 1, 0, false); // Перейти на последний слайд
        },
    },
});

const secondSlider = new Swiper('.second-slider', {
    // Настройки второго слайдера
    initialSlide: 2, // Задайте индекс последнего слайда (например, 2 для третьего слайда)
    loop: true,
    pagination: {
        el: '.second-slider .swiper-pagination',
        clickable: true,
    },
    on: {
        init: function () {
            this.slideTo(this.slides.length - 1, 0, false); // Перейти на последний слайд
        },
    },
});
```

### Объяснение кода:
1. **initialSlide**: Этот параметр определяет, какой слайд будет активным при инициализации. Укажите индекс последнего слайда (индексация начинается с 0).
  
2. **on.init**: Событие, которое вызывается после инициализации слайдера. Мы используем `slideTo` для перехода на последний слайд без анимации.

3. **loop**: Если вы хотите бесконечный цикл, убедитесь, что эта настройка включена.

Попробуйте данный код, и последний слайд должен стать активным при инициализации слайдеров. Если есть необходимость в более сложной настройке, вы можете дополнительно рассмотреть другие параметры и методы API Swiper.
Похожие вопросы