Как сделать увеличение активного слайда Swiper Slider?

Question

Как сделать, чтобы активный слайд был увеличен где-то на 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>

Answer 1

С помощью CSS. Внутрь контейнера swiper-slide добавьте ещё один контейнер, который будет увеличиваться/уменьшаться. Примерно так:

HTML:

<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <div class="container">Slide 1</div>
    </div>
    <div class="swiper-slide">
      <div class="container">Slide 2</div>
    </div>
    <div class="swiper-slide">
      <div class="container">Slide 3</div>
    </div>
  </div>
  <div class="swiper-pagination"></div>
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
</div>

CSS:

.swiper-slide-active .container {
      transform: scale(1.2); // увеличение на 20%
      transition: transform .2s ease;
  }
.swiper-slide .container {
      transform: scale(1); // уменьшить неактивный слайд
      transition: transform .2s ease;
  }

БЛОГ НА HUSL

Как сделать увеличение активного слайда Swiper Slider?

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