Как правильно отцентрировать средний слайд?
Как правильно отцентрировать средний слайд так что бы крайние 2 обрезались равномерно по краям?
const saSlider = new Swiper('.sa-slider', {
slidesPerView: 5,
loop: true,
centeredSlides: true,
spaceBetween: 30,
pagination: {
el: '.swiper-pagination',
clickable: true,
},
});
.sa-slide {
min-width: 200px;
background-color: #000;
}
.sa-slide img {
object-fit: contain;
}
.swiper-container {
width: 100%;
height: 100%;
}
.sa-slider {
overflow: visible !important;
}
.sa-slider .swiper-slide-active {
transform: scale(1.3);
}
.sa-slider {
height: 200px;
}
<script src="https://unpkg.com/swiper/js/swiper.min.js"></script>
<link href="https://unpkg.com/swiper/css/swiper.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="swiper-container sa-slider">
<div class="swiper-wrapper">
<div class="swiper-slide sa-slide">
<div class="sa-slide-content">
<img src="https://cdn.pixabay.com/photo/2015/12/01/20/28/road-1072823_960_720.jpg" alt="">
</div>
</div>
<div class="swiper-slide sa-slide">
<div class="sa-slide-content">
<img src="https://cdn.pixabay.com/photo/2015/12/01/20/28/road-1072823_960_720.jpg" alt="">
</div>
</div>
<div class="swiper-slide sa-slide">
<div class="sa-slide-content">
<img src="https://cdn.pixabay.com/photo/2015/12/01/20/28/road-1072823_960_720.jpg" alt="">
</div>
</div>
<div class="swiper-slide sa-slide">
<div class="sa-slide-content">
<img src="https://cdn.pixabay.com/photo/2015/12/01/20/28/road-1072823_960_720.jpg" alt="">
</div>
</div>
<div class="swiper-slide sa-slide">
<div class="sa-slide-content">
<img src="https://cdn.pixabay.com/photo/2015/12/01/20/28/road-1072823_960_720.jpg" alt="">
</div>
</div>
<div class="swiper-slide sa-slide">
<div class="sa-slide-content">
<img src="https://cdn.pixabay.com/photo/2015/12/01/20/28/road-1072823_960_720.jpg" alt="">
</div>
</div>
</div>
</div>