Swiper не будет центрирован ⇐ Javascript

[Anonymous]

Я сделал этот слайдер, используя Swiper, поэтому текущий слайд всегда должен выглядеть больше, чем остальные, и быть центрированным. Также будет сохранен маржа 10px между слайдами. class = "Snippet-Code-JS Lang-JS PrettyPrint-Override">

Код: Выделить всё

new Swiper(".swiper", {
speed: 1000,
loop: true,
centeredSlides: true,
slidesPerView: "auto",
spaceBetween: 10,
loopedSlides: 5,
autoplay: {
delay: 3000,
disableOnInteraction: false,
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev"
}
});< /code>
body {
background: gray;
padding: 50px 0;
}
.slider-area {
width: 100%;
margin: auto;
background: gray;
}
.slider-area .swiper .swiper-wrapper {
align-items: center;
height: 560px;
}
.slider-area .swiper .swiper-slide {
width: auto;
height: 440px;
will-change: height;
transition-property: height;
transition-duration: 1s;
}
.slider-area .swiper .swiper-slide.swiper-slide-duplicate-active,
.slider-area .swiper .swiper-slide.swiper-slide-active {
height: 560px;
}
.slider-area .swiper .swiper-slide img {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
}< /code>







[img]https://placehold.jp/400x560.png[/img]

[img]https://placehold.jp/400x560.png[/img]

[img]https://placehold.jp/400x560.png[/img]

[img]https://placehold.jp/400x560.png[/img]

[img]https://placehold.jp/400x560.png[/img]

[img]https://placehold.jp/400x560.png[/img]

https://codepen.io/alive_coders/pen/bnbrple

Подробнее здесь: https://stackoverflow.com/questions/794 ... e-centered