Как сделать, чтобы активный слайд был увеличен где-то на 20% по отношению к неактивным?
const swiper = new Swiper('.swiper-container', {
loop: true,
effect: 'coverflow',
grabCursor: true,
centeredSlides: true,
slidesPerView: 'auto',
spaceBetween: 15,
coverflowEffect: {
rotate: 0,
stretch: 0,
depth: 0,
modifier: 200,
slideShadows : true,
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});
.swiper-slide {
height: 300px !important;
width: 200px !important;
background: red;
}
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<link href="https://unpkg.com/swiper/swiper-bundle.min.css" rel="stylesheet"/>
<div class="swiper-container">
<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>
<div class="swiper-pagination"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>