Swiper Web制作 スライダー

【Swiper】スライダーの真ん中だけ大きく左右の画像は小さくする方法

※ 当サイトではアフィリエイト広告を利用しています

Swiperで真ん中だけ大きくさせる方法ない?

今回はSwiperを使って真ん中だけ大きく、左右は薄く小さくする方法を解説します。

Swiperの基本的な使い方についてはこちらの記事を参照下さい。

あわせて読みたい
【jQuery不要】スライダープラグイン Swiper.jsの使い方
【2024年最新Ver11】Swiperの使い方とよく使うオプション・カスタマイズ方法を解説

続きを見る

またSwiperには色々カスタマイズが出来るオプションがあるので、そちらも合わせて活用すると実装出来るスライダーの幅が広がります。

あわせて読みたい
【Swiper】カスタマイズ用オプションまとめ一覧
【Swiper】カスタマイズ用オプションまとめ一覧

続きを見る

 

完全無料のプログラミングスクール『ZeroPlus Gate』
30日間でWeb制作を学べる無料のプログラミングスクールがこちら
  • 30日間でWeb制作を学べる
  • 完全無料
  • 現役エンジニアへの質問無制限
  • オンラインの動画学習なので時間場所を問わず勉強可能
  • 最大4回の学習サポート面談
  • 受付は1日25名までの先着制
無料なのに専属のメンターが付き、現役エンジニアへの質問も無制限という破格のサービスです。
いきなり数十万するプログラミングスクールは厳しい・・・という人のお試しに最適。
現在は無料ですがいつ有料になるか分からないので、気になる方はお早めに👇

\ 完全無料 /

ZeroPlus Gate公式サイト

先着1日25名まで!

Swiperでスライダーの真ん中だけ大きく左右の画像は小さくする方法

まずは基本となるスライダーを見てみます。

See the Pen
Swiper(矢印、ドットインジケーター)
by junpei (@junpei-sugiyama)
on CodePen.

前後の矢印、ページネーションが表示されているシンプルなスライダーです。

これを元に今回のスライダーを作りますが、完成系はこちらです。

See the Pen
Swiper(左右を小さく)
by junpei (@junpei-sugiyama)
on CodePen.

それではコードの解説をしていきます。

 

コード解説

HTMLは基本形と同じなので割愛しますが、スライドの枚数が少ないと上手くいかないのでご注意下さい(バージョン9系の場合)

 

CSS

CSSはこちらです。

.swiper-slide {
  opacity: .3; /* 左右のスライドを薄くする */
  transform: scale(.8); /* 左右のスライドを小さくする */
  transition: .7s; /* ゆっくり小さくさせる */
}
.swiper-slide img {
  height: auto;
  width: 100%;
}
.swiper-slide-active {
  opacity: 1; /* 中央のスライドは薄くしない */
  transform: scale(1); /* 中央のスライドは小さくしない */
  z-index: 1; /* 中央のスライドを一番上にする */
}

ほとんどコメントで解説していますが、.swiper-slideで左右のスライドにスタイルをあてています。

具体的には『薄く・小さく・ゆっくり変化』させています。

そして.swiper-slide-activeは中央のスライドで『薄く・小さく』を解除する形になっています。

あとはz-index: 1;を書かないと左右のスライドが上に来てしまうので注意しましょう。

.swiper-slide imgに関しては基本形と同じです。

 

JavaScript

JavaScriptはこちらです。

const swiper = new Swiper(".swiper", {
  centeredSlides: true, // 1枚目のスライドを中央にする
  loop: true, // ループさせる
  speed: 500, // 少しゆっくり(デフォルトは300)
  slidesPerView: 3, // スライドの表示枚数
  autoplay: { // 自動再生
    delay: 3000, // 3秒後に次のスライド
    disableOnInteraction: false, // 矢印をクリックしても自動再生を止めない
  },
  // ページネーション
  pagination: {
    el: ".swiper-pagination",
    clickable: true,
  },
  // 前後の矢印
  navigation: {
    nextEl: ".swiper-button-next",
    prevEl: ".swiper-button-prev",
  },
});

ここのポイントはcenteredSlides: true,で、これを書くことで1枚目のスライドが左ではなく中央になります。

あとは表示枚数や次のスライドに切り替わるまでの時間など、お好みで変更して下さい。

ページネーションと前後の矢印は、今回のテーマとは関係のない基本形と同じなので割愛します。

まとめ:Swiperで真ん中だけ大きく左右の画像は小さくするにはCSSで調整

Swiperで真ん中だけ大きく左右の画像は小さくするにはパラメータのcenteredSlidesを使いますが、その他にもCSSで左右のサイズ・薄さ・アニメーションの時間などを調整する必要があります。

調整次第で見え方も変わると思うので、ぜひ色々と試してみて下さい。

以上になります。

関連記事slick記事一覧
関連記事Swiper記事一覧
関連記事Splide記事一覧

この記事が役に立ったと思ったら、シェアボタンからX(旧Twitter)などにシェアすると、いいねされてフォロワーが増えたりすることがあるよ!

 

Web制作おすすめ教材と案件獲得サービス
当ブログではWeb制作学習におすすめの教材を厳選してご紹介しています。
こちらの記事を参考に教材を購入して成果を出している人もたくさんいるので、自分に必要な教材を探してみて下さい。
また、学習面だけでなく営業面である案件獲得サービスもご紹介しています。
スキルが身についても仕事がなければ意味がないので、営業に不安がある人はこちらの記事をぜひ参考にしてみて下さい。
この記事を参考にスキルと営業力を身につけて稼げるようになりましょう!

-Swiper, Web制作, スライダー