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

Question

Подключил слайдер, указал всё необходимое для меня в объекте слайдера:

Код который имею на этот момент (при просмотре выполнения на стак не показывает как нужно(отступы не работают). Нажмите пожалуйста развернуть фрагмент для просмотра работы кода):

let swiper = new Swiper(".swiper", {
 
        loop: true,
        centeredSlides: true,

        slidesPerView: 3,
        spaceBetween: 60, 
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
          speed: 1000
        },
        speed: 1000,
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        } 
      });

.swiper-slide img {
  width: 427px;
  height: 570px;
}
.swiper-slide {
  width: 427px;
  height: 570px;
}

<script defer src="https://unpkg.com/swiper@8/swiper-bundle.min.js"></script>
<link href="https://unpkg.com/swiper@8/swiper-bundle.min.css" rel="stylesheet"/>
<div class="slider-container swiper-container">
    <div class="swiper swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <img src="https://klike.net/uploads/posts/2019-01/1547366815_1.jpg" alt="">
        </div>
        <div class="swiper-slide">
          <img src="https://klike.net/uploads/posts/2019-01/1547366815_1.jpg" alt="">
        </div>
        <div class="swiper-slide">
          <img src="https://klike.net/uploads/posts/2019-01/1547366815_1.jpg" alt="">
        </div>
        <div class="swiper-slide">
          <img src="https://klike.net/uploads/posts/2019-01/1547366815_1.jpg" alt="">
        </div>
        <div class="swiper-slide">
          <img src="https://klike.net/uploads/posts/2019-01/1547366815_1.jpg" alt="">
        </div>
      </div>
      <div class="swiper-pagination"></div>
      <div class="btn-container">
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
      </div>
    </div>
  </div>

Теперь мне необходимо реализовать увеличение активного (центрального) слайда и я не знаю как это сделать, ибо картинка при изменении width/height или transform:scale() увеличивается вправо... как итог я получаю такой результат

Необходимо такой:

Помогите пожалуйста
UPD: Я попробовал посмотреть варианты в других ответах, но они либо не работают, либо не подходят мне. Может где-то я не докопал...

Answer 1

Вот, но там есть проблема, при полном пролистывании, последний и первый слайд почему то игнорирует transition и анимация проигрывается без плавности

new Swiper(".swiper", {
    
    loop: true,
    centeredSlides: true,
    
    slidesPerView: 3,
    spaceBetween: 60,
    pagination: {
        el: ".swiper-pagination",
        clickable: true,
        speed: 1000
    },
    speed: 1000,
    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
    }
});

.swiper-slide img {
    width: 100%;
    height: 400px;
    
}
.swiper-slide {
    transition: all 0.5s ease;
    padding: 40px 0;
}
.swiper-slide-active {
    transform: scale(1.1);
}

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
    
    <link href="https://unpkg.com/swiper@8/swiper-bundle.min.css" rel="stylesheet"/>
</head>
<body>
<div class="slider-container swiper-container">
    <div class="swiper swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <img src="https://klike.net/uploads/posts/2019-01/1547366815_1.jpg" alt="">
            </div>
            <div class="swiper-slide">
                <img src="https://klike.net/uploads/posts/2019-01/1547366815_1.jpg" alt="">
            </div>
            <div class="swiper-slide">
                <img src="https://klike.net/uploads/posts/2019-01/1547366815_1.jpg" alt="">
            </div>
            <div class="swiper-slide">
                <img src="https://klike.net/uploads/posts/2019-01/1547366815_1.jpg" alt="">
            </div>
            <div class="swiper-slide">
                <img src="https://klike.net/uploads/posts/2019-01/1547366815_1.jpg" alt="">
            </div>
        </div>
        <div class="swiper-pagination"></div>
        <div class="btn-container">
            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>
        </div>
    </div>
</div>
    <script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"></script>
    <script src="scripts.js"></script>
</body>
</html>

БЛОГ НА HUSL

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

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