Я столкнулся с простой задачей, но не могу понять, как её реализовать. У меня есть код для слайдера Swiper:
```html
<div class="main__slider swiper">
<div class="main__wrapper swiper-wrapper">
<div class="main__slide swiper-slide">1</div>
<div class="main__slide swiper-slide">2</div>
<div class="main__slide swiper-slide">3</div>
<div class="main__slide swiper-slide">4</div>
</div>
</div>
```
И соответствующий JavaScript код:
```javascript
if (document.querySelector('.swiper')) {
new Swiper('.swiper', {
modules: [Navigation],
observer: true,
observeParents: true,
slidesPerView: 3,
spaceBetween: 20,
CenteredSlides: true,
speed: 800,
touchRatio: 0,
simulateTouch: false,
loop: true,
on: {}
});
}
```
Мне нужно, чтобы отображалось три слайда в ряд, при этом один слайд должен быть по центру. Однако при текущем настроенном режиме, четвертый слайд оказывается слева, а второй справа, а третий слайд скрыт для перелистывания. Я понимаю, что `CenteredSlides: true` просто центрирует слайды, но не делает центральный слайд активным. Как мне решить эту проблему?
Чтобы центрировать первый слайд в Swiper и сделать его "активным", вы можете использовать свойство `initialSlide`, которое задает индекс начального слайда. В вашем случае, при настройке `slidesPerView: 3`, чтобы сделать второй слайд активным (по центру), вам необходимо установить `initialSlide` на 1 (индексация начинается с 0):
```javascript
if (document.querySelector('.swiper')) {
new Swiper('.swiper', {
modules: [Navigation],
observer: true,
observeParents: true,
slidesPerView: 3,
spaceBetween: 20,
centeredSlides: true, // здесь нужно изменить на строчные буквы
initialSlide: 1, // устанавливаем слайд, который будет по центру
speed: 800,
touchRatio: 0,
simulateTouch: false,
loop: true,
on: {}
});
}
```
### Объяснение ключевых параметров:
- **centeredSlides: true** - эта настройка позволяет центровать слайды, но не делает центральный слайд активным, если не указать `initialSlide`.
- **initialSlide: 1** - устанавливает второй слайд (индекс 1) как активный, что в результате делает его центральным слайдом.
Таким образом, слайдер будет правильно позиционировать слайды, и вы получите желаемый результат, когда первый слайд будет по центру. Не забудьте также исправить опечатку в `CenteredSlides` на `centeredSlides`.