【備忘録】Swiperで左右に切れた画像を表示させる方法

今回は、本記事のサムネイル画像のような「Swiperで左右に切れた画像を表示させる方法」について解説していきます。

Swiperでのレイアウトのバリエーションを増やすことが出来るので、是非参考にしてください。

Swiperで左右に切れた画像を表示させる方法

完成形はこちらです。

See the Pen
Untitled
by webis (@webis-co)
on CodePen.

中央に1枚のスライドが表示され、左右に切れた画像が表示されていることが分かるでしょう。

それでは早速作り方を見ていきましょう。

HTML

HTMLコードはこちら。

これはよくあるSwiperの雛形のコードです。

JavaScript

左右に切れた画像を表示させるコードはこちら。

slidesPerViewで2を指定します。

spaceBetweenにはスライドの余白を指定することが出来て今回は30pxとしました。

centeredSlidesをtrueにすることで、スライドを中央に表示させます。

initialSlideに1を指定したら、上記のサンプルのように左右に切れた画像が表示されるスライダーが完成するでしょう。

まとめ

以上が、Swiperで左右に切れた画像を表示させる方法」でした。

簡単に出来るので、是非試してみてください。

この記事を書いた人
Yujiro WEBコーダー

大阪のWEB制作会社で働くコーダー。コーディングにハマり、気づいたらWEB制作を仕事にしていました。現在は新規のWEBサイト制作やWordPressカスタマイズしたり、当技術ブログを運営しています。

関連記事