中央の画像を拡大表示するカルーセル_swiper

最終更新日

左右が見切れるスライダーの、中央の画像が拡大するようにアレンジします。

サンプルはこちら

やりたいこと

PC表示は5枚の画像に左右の画像を合わせて7枚表示させ、スマホの場合は3枚に左右の画像を合わせて5枚表示させる。
いずれも中央の画像は拡大させるが、画像の左右のmarginは変更させない。サンプル参照

サンプルコード

  <div class="mySwiper swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide"><img src="images/cat_1.jpg" alt=""></div>
      <div class="swiper-slide"><img src="images/cat_2.jpg" alt=""></div>
      <div class="swiper-slide"><img src="images/cat_3.jpg" alt=""></div>
      <div class="swiper-slide"><img src="images/cat_4.jpg" alt=""></div>
      <div class="swiper-slide"><img src="images/cat_5.jpg" alt=""></div>
      <div class="swiper-slide"><img src="images/cat_6.jpg" alt=""></div>
      <div class="swiper-slide"><img src="images/cat_7.jpg" alt=""></div>
      <div class="swiper-slide"><img src="images/cat_8.jpg" alt=""></div>
    </div>
  </div>
  <style>
    .swiper-wrapper {
      margin-left: -4%;//※4
    }
    .swiper-slide {
      width: 15.6666667% !important;//※2
      margin-right: .5%;
      margin-left: .5%;
      padding-top: 2.5%;//※画像を上下を調整
      opacity: .8;
    }
    .swiper-slide.swiper-slide-active {
      width: 23.6666667% !important;//※3
      padding-top: 0;//※画像を上下を調整
      opacity: 1;
    }
    .swiper-slide img {
      width: 100%;
    }
    @media only screen and (max-width: 768px) {
      .swiper-wrapper {
        margin-left: -3%;//※4
      }
      .swiper-slide {
        width: 24% !important;//※2
      }
      .swiper-slide.swiper-slide-active {
        width: 30% !important;//※3
      }
    }
    </style>
  <script>
    let swiper = new Swiper('.mySwiper', {
      slidesPerView: 6,//※1、※必須
      centeredSlides: true,//※必須
      loop: true,//※必須
      speed: 400,
      autoplay: {
        delay: 4000,
      },
      breakpoints: {
        768: {
          slidesPerView: 4,//※1
        },
      },
    });
    </script>

解説

  1. swiperのslidesPerViewを設定する。
    (※1/7枚表示させる場合、設定としては”slidesPerView: 6”とする。)
  2. cssで.swiper-slideのwidth(横幅をslidesPerViewを設定数で割った数値)を変更する。
    (※2/100%÷6=16.6666667%となるが、左右のmarginを0.5%分とっているので15.6666667%としている)
  3. .swiper-slide-activeのwidth(拡大させたい分だけ※2にプラスさせる)を変更する。
    (※3/今回は仮に8%プラスさせている)
  4. .swiper-wrapperの位置を左にずらして(.swiper-slide-activeにプラスした値の半分)全体を中央にもってくる。
    (※4/8%÷2=4%となるので-4%)

slickやswiperで中央に画像が来たときに、transform:scale()を使う方法はよく見るのですが、そうすると左右のmarginが狭まるため、今回の要件には合わず、swiperをアレンジして実装しました。
どなたかの参考になれば幸いです。

参考リンク