Как реализовать в Swiper карусель с широким центральным элементом?

Question

вот настройка моего Swiper:

var swiper = new Swiper(".mySwiper", {
slidesPerView: 'auto',
spaceBetween: 120,
centeredSlides: true,
loop: true,
navigation: {
  nextEl: ".next-slide-btn",
  prevEl: ".prev-slide-btn",
},

}); Мой html и css внизу:

<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>
 <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css"/>
 <link rel="stylesheet" href="test.css"/>
 <link rel="stylesheet" href="fonts/fonts.css"/>
</head>
<body>
<div class="swiper-container mySwiper">
 <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 class="swiper-slide">Slide 4</div>
 </div>
</div>
<button class="next-slide-btn">next</button>
<button class="prev-slide-btn">prev</button>
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

<!-- Initialize Swiper -->
<script>
 var swiper = new Swiper(".mySwiper", {
   slidesPerView: 'auto',
   spaceBetween: 120,

   centeredSlides: true,
   loop: true,
   navigation: {
     nextEl: ".next-slide-btn",
     prevEl: ".prev-slide-btn",
   },
 });
</script>
</body>
</html>

> 
body {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
}
.swiper-container {
   height: 100%;
   /*//max-width: 1000px;*/
   overflow: hidden;
   background-color: antiquewhite;
   width:100%;
   /*height: 300px;*/

}

.swiper-wrapper {
   display: flex;
   align-items: center;
   flex-direction: row;
}


.next-slide-btn {
   height: 50px;
   width: 50px;
}

.prev-slide-btn {
   height: 50px;
   width: 50px;
}

.swiper-slide {
   width: 183px;
   height: 183px;
   font-size: 18px;
   background: #dc6060;
}

.swiper-wrapper {
   width: 100%;

}

.swiper-slide-active {
   background-color: rgba(162, 217, 148, 0.41);
   width: 392px;
   height: 392px;
}

Создатели библиотеки сказали использовать slidesPerView: 'auto' что бы сделать разную ширину элементов . передний должен быть более широким чем боковым. по бокам от центрального должно быть 2 элемента.и в принципе эту ширину можно посчитать и задать контейнеру, но центральный блок ведёт себя как на картинке. Он центрируется как будто имеет ширину малых блоков по бокам. Как это исправить?

БЛОГ НА HUSL

Как реализовать в Swiper карусель с широким центральным элементом?

Ответы (0 шт):