Как реализовать такой слайдер?

Question

[Hryhorii]

Привет. Как сделать такой слайдер?



Использую Свайпер, и получается следующее:

const swiper = new Swiper('.swiper-container', {
  slidesPerView: 3,
  centeredSlides: true,
  loop: true,
  spaceBetween: 70,
  pagination: {
    el: '.swiper-pagination',
    type: 'fraction',
  },
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
});

Суть в том, что когда я указываю дробное число в slidesPerView, дабы отображался один слайд и половинки предыдущего и следующего по бокам - слайды с классами prev/next/active уезжают по итогу за пределы видимости, а не фиксируются, как при slidesPerView: 3, отчего все сбивается и слайды заезжают на кнопки со стрелками. Со значением slidesPerView: 'auto' та же история

На самих слайдах задана необходимая ширина, но на втором скриншоте они сжимаются самим свайпером из-за указанного slidesPerView: 3

Как это реализовать?

Comments

[Ankhena]

https://swiperjs.com/demos#centered
и следом за ним https://swiperjs.com/demos#centered-auto

Answer 1

[Алекс Глебов]

Делай слайдер с одним слайдом и убирай overflow: hidden в .swiper-container. Будут видны остальные слайды.

Либо вот пример с вариативной шириной
https://swiperjs.com/demos#slides-per-view-auto

Comments

[Hryhorii]

Получается следующее
Один слайдер выглядит хорошо и стоит по центру:



А дальше начинается следующее и в таком духе едет дальше, полностью сбивается:



Т.е., они не держатся по центру и слайды с классами prev, active, next уезжают вообще за пределы видимости

[Алекс Глебов]

Гриша, нужна демка на codepen

[Hryhorii]

Алекс Глебов, вот: https://codepen.io/callmegrisha/pen/jOyNBZz