カレントが中央で拡大されるスライダー

シンプル ver.

一般的なswiperのスライダーを実装し、css後付けでカレントのスライドにscaleで拡大をつけている。
スライド全部にopacityで薄くしておき、カレントだけ1に戻す。透過度を変えたほうが直感的にわかりやすい印象。

.swiper-slide {
    overflow: hidden;
    opacity: 0.6;
    transition: 0.7s;
  }

  .swiper-slide img {
    width: 100%;
  }

  .swiper-slide-active {
    z-index: 1;
    opacity: 1;
    transform: scale(1.2); /* スライドの大きさ調整 */
  }

左右にチラ見えしているスライドはswiperのオプションslidePerViewがポイント。
スライド間隔はcssでなくswiperのオプションspeceBetweenで指定。sp,pcでサイズ感が変わるため数値は調整している。

const swiper = new Swiper('.swiper-container', {
  modules: [Navigation],
  centeredSlides: true,
  loop: true,
  loopedSlides: 2,
  speed: 500,
  slidesPerView: 1.5,
  // スマホのときだけスライド間隔を小さく
  spaceBetween: 40,
  autoplay: {
    delay: 3000,
  },
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
  breakpoints: {
    // pcのサイズ
    768: {
      spaceBetween: 80,
    },
  },
})

おしゃれver.

.swiper-container2 {
    .swiper-slide {
      transition: transform 0.7s;
      transform: scale(0.48);
    }
    .swiper-slide-active {
      transform: scale(1);
      transition-delay: 0.8s;
    }
    .swiper-slide-prev {
      transform-origin: 100% 50%;
    }
    .swiper-slide-next {
      transform-origin: 0% 50%;
    }
  }

コツは、スライドのデフォルトサイズを共通で0.47に縮めておき、カレントの真ん中だけ1に戻してあげること。
また左右のtransform-originを上記にようにすることで、左右真ん中の位置に置くことができる。
動きは横移動→拡大と段階的に動作するのが美しいので、カレントにdelayを加えている。