Как настроить внешний вид слайдера в библиотеке Swiper?

Как настроить слайдер с использованием swiper.js для контейнера размером 1200px на 400px, где неактивные слайды имеют размеры 450px на 300px, а активный слайд — 600px на 400px для центрирования?
  • 24 июля 2024 г. 17:22
Ответы на вопрос 1
Для настройки внешнего вида слайдера в библиотеке Swiper, можно использовать CSS и опции инициализации самого слайдера.

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

HTML:
```html
<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide">Slide 1</div>
    <div class="swiper-slide">Slide 2</div>
    <div class="swiper-slide">Slide 3</div>
  </div>
</div>
```

CSS:
```css
.swiper-slide {
  width: 450px;
  height: 300px;
}

.swiper-slide-active {
  width: 600px;
  height: 400px;
}
```

JavaScript:
```javascript
var mySwiper = new Swiper('.swiper-container', {
  slidesPerView: 'auto',
  centeredSlides: true,
  spaceBetween: 20,
  loop: true
});
```

В данном примере слайдер будет иметь контейнер размером 1200px на 400px, неактивные слайды будут иметь размеры 450px на 300px, а активный слайд будет иметь размеры 600px на 400px и будет центрирован.
Похожие вопросы