MENU
  1. ホーム
  2. フロントエンド
  3. JavaScript
  4. 【Swiper】スライドを左右にはみ出させる＆中央のスライドを大きくする方法

【Swiper】スライドを左右にはみ出させる＆中央のスライドを大きくする方法

JavaScript

今回はSwiperのカスタマイズ方法として、以下のようなスライダーを作成する方法を紹介します。

  • スライドを1度に3枚表示する
  • 中央のスライドは大きく、左右のスライドは少し小さくする
  • 左右のスライドは画面外にはみ出させる

実装DEMOとコピペ用のコード一式も用意していますので、是非参考にしてみてください。

目次

左右にはみ出すスライダーの実装DEMO

こちらが今回作成するスライダーの実装DEMOです。

実際の挙動を確認してみてください。

今回の制作物が確認できたので、次はコピペ用の実装コードの紹介をしていきます。

【コピペ用】左右にはみ出すスライダーの実装コード一式

コピペするとすぐにお使いいただける全体コード一式です。

HTML・CSS・JavaScriptファイルをそれぞれ作成してお使いください。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Swiper 実装DEMO</title>
    <!-- CDN読み込み -->
    <link rel="stylesheet" href="https://unpkg.com/swiper@7/swiper-bundle.min.css" />
    <!-- CSSファイル読み込み -->
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="swiper">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <img src="slide-1.png" alt="スライド1" />
        </div>
        <div class="swiper-slide">
          <img src="slide-2.png" alt="スライド2" />
        </div>
        <div class="swiper-slide">
          <img src="slide-3.png" alt="スライド3" />
        </div>
        <div class="swiper-slide">
          <img src="slide-4.png" alt="スライド4" />
        </div>
      </div>

      <div class="swiper-button-prev"></div>
      <div class="swiper-button-next"></div>
    </div>

    <!-- CDN読み込み -->
    <script src="https://unpkg.com/swiper@7/swiper-bundle.min.js"></script>
    <!-- JSファイル読み込み -->
    <script src="main.js"></script>
  </body>
</html>

画像は用意していませんので、各自で用意してパスを記入してください。

/* 画像 */
img {
  width: 100%;
  height: auto;
}

/* スライド全体 */
.swiper-slide {
  transition: transform 0.6s;
}

/* 左右のスライド */
.swiper-slide-prev,
.swiper-slide-next,
.swiper-slide-duplicate-prev,
.swiper-slide-duplicate-next {
  transform: scale(0.85);
}
const swiper = new Swiper(".swiper", {
  speed: 600,
  loop: true,
  slidesPerView: 1.8,
  centeredSlides: true,
  spaceBetween: 20,

  navigation: {
    nextEl: ".swiper-button-next",
    prevEl: ".swiper-button-prev",
  },
});

以上で実装コードの紹介は終わりです。

次の章でそれぞれの詳しい解説をしていきますので、カスタマイズしたい・コードを理解したいという方は読み進めてください。

【解説】左右にはみ出すスライダーの実装コード解説

ここからは実装コードの解説をしていきます。

  1. Swiperを読み込む
  2. HTML
  3. CSS
  4. JavaScript

上記の順番で進めていきますね。

①Swiperを読み込む

Swiperを使用するには、ライブラリを読み込む必要がありますね。

今回は、一番手軽に読み込むことができるCDNを使用します。

CSSはheadタグ内に、JavaScriptはbody閉じタグの直前で以下のようにして読み込んでください。

<head>
  <!-- head内でCSSのCDNを読み込む -->
  <link rel="stylesheet" href="https://unpkg.com/swiper@7/swiper-bundle.min.css" />
  <link rel="stylesheet" href="style.css" />
</head>
<body>

  <!-- bodyの閉じタグ直前でJSのCDNを読み込む -->
  <script src="https://unpkg.com/swiper@7/swiper-bundle.min.js"></script>
  <script src="script.js"></script>
</body>

npmでのインストール、アセットを直接ダウンロードするなど他にも読み込む方法はありますので、詳しくはSwiperの公式ページから確認してください。

②HTML

続いてはHTMLの解説をしていきます。

<div class="swiper">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <img src="slide-1.png" alt="スライド1" />
    </div>
    <div class="swiper-slide">
      <img src="slide-2.png" alt="スライド2" />
    </div>
    <div class="swiper-slide">
      <img src="slide-3.png" alt="スライド3" />
    </div>
    <div class="swiper-slide">
      <img src="slide-4.png" alt="スライド4" />
    </div>
  </div>

  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
</div>

Swiperの公式ページで紹介されているHTMLレイアウトをほぼそのまま使用しています。

imgタグのsrcは仮なので、各自画像を用意してパスを繋いでください。

③CSS

続いてはCSSの解説です。

ここで左右のスライドの大きさを調整します。

/* 画像 */
img {
  width: 100%;
  height: auto;
}

/* スライド全体 */
.swiper-slide {
  transition: transform 0.6s;
}

/* 左右のスライド */
.swiper-slide-prev,
.swiper-slide-next,
.swiper-slide-duplicate-prev,
.swiper-slide-duplicate-next {
  transform: scale(0.85);
}

左右の画像を縮小するには、transformのscaleを使用します。

transform: scale(0.85); /* オリジナルサイズの0.85倍の大きさにする */

scaleは数値を1以上にすると拡大し、1以下にすると縮小させることができるCSS関数です。

あわせて読みたい
【CSS】transform: scale()で要素を拡大・縮小する方法 今回は、CSSアニメーションを設定する際によく使うscale()を紹介します。 この機能を使うことで、要素を自由に拡大・縮小することができますので、是非参考にしてみてく…

この関数を利用して左右に配置されるスライドを縮小することで、中央のスライドが大きく見えるという仕組みですね。

Swiperでは、前のスライドにswiper-slide-prev、次のスライドにswiper-slide-nextというCSSクラスが自動的に付与されます。

それらのクラスに対して、scaleをかけることでスライド自体のサイズを縮小します。

/* 左右のスライド */
.swiper-slide-prev,
.swiper-slide-next,
.swiper-slide-duplicate-prev,
.swiper-slide-duplicate-next {
  transform: scale(0.85);
}

さらに今回はループをONにしているので、最初のスライド・最後のスライドの前後に複製されるスライドに対してもscaleをかけておきます。

これで左右のスライドを縮小して表示することができました。

CSSの解説は以上です。

④JavaScript

最後はJavaScriptの解説をしていきます。

const swiper = new Swiper(".swiper", {
  speed: 600, // スライドの切り替えスピード
  loop: true, // ループさせる
  slidesPerView: 1.8, // スライドを複数枚表示する
  centeredSlides: true,  // スライドを中央寄せにする
  spaceBetween: 20, // スライド間の余白

  navigation: {
    nextEl: ".swiper-button-next",
    prevEl: ".swiper-button-prev",
  },
});

今回のスライダーには、上記のSwiperオプションを設定しています。

この中でも重要なのが、slidesPerViewです。

このオプションでは、1度に何枚のスライドを表示するかを指定することができます。

デフォルト値は1なので、何も指定しない場合は1画面にひとつのスライドが表示されますね。

これを1.8のように小数にすることで、複数スライドを表示かつスライドをはみ出させることができます。

次に重要なのが、centeredSlidesです。

これをtrueにすることで、スライドが中央寄せで表示されるようになります。

あとはspaceBetweenでスライド間の余白を調整、speedでスライドの切り替え速度を調整して完成です！

以上でJavaScriptの解説は終わりです。

【まとめ】スライドを左右にはみ出させる＆中央のスライドを大きくする方法

Swiperで左右のスライドを小さく＆中央のスライドを大きくする方法を紹介しました。

  • スライドを1度に3枚表示する
  • 中央のスライドは大きく、左右のスライドは少し小さくする
  • 左右のスライドは画面外にはみ出させる

こういったスライダーを作成したい場合は、是非この記事を参考にしてみてください。

実装DEMO

記事が役に立ったらサポートしてください

Web制作に関する
記事案を募集中！

Web制作について知りたいこと、質問等ありましたら、以下のフォームから気軽に投稿してください。
要望が多かったものは解説記事を作成します。

POST
JavaScript
Swiper
よかったらシェアしてね！
  • URLをコピーしました！
  • URLをコピーしました！

コメント

コメントする

CAPTCHA


目次