Можно ли задать разную ширину слайдам в Swiper JS?

Question

[thirteen_bit]

Можно ли задать такую ширину некоторым слайдам автоматически, например каждый нечетный 75% ширины, каждый четный – 25%? Как slidesPerView: 2, только с разной шириной у слайдов...

Comments

[historydev]

если зальёте на песочек, попробую что-то придумать

[thirteen_bit]

Владимир, https://codepen.io/starostyants/pen/YzvNdgq

[thirteen_bit]

Владимир, обновил codepen, todaystudio подсказал решение – можно задать ширину в процентах напрямую в .swiper-slide. Ух...

[historydev]

thirteen_bit, а, так вам буквально просто стили слайда изменить нужно было?

Answer 1

[todaystudio]

Может, конечно, не совсем правильно вас понял, но у Swiper уже есть готовое решение. Нам необходимо только установить ширину для наших слайдов и поставить свойство slidesPerView: "auto"

Answer 2

[historydev]

slidesPerView: "auto"

.swiper-slide {
  width: 200px;
  height: 200px;
  background: red;
}

.swiper-slide:nth-child(3) {
  width: 100px;
}