【v8】Swiperの使い方・実用的なデモ15個の解説 ー基礎から応用までー
更新日:2023/06/29
Webサイトのコーディングをするなら必修とも言えるスライダー。
スライダー実装用のJSプラグインはいろいろありますが、本記事ではその中でもSwiperを使用した実用的なカスタマイズ例をご紹介します。
まずはこちらのデモページをご覧ください。
片方だけはみ出しているスライダー、サムネイルと連動するスライダー、SPだけスライダーにする方法などなど、実際によく必要になる機能を網羅できるようなデモを厳選してご用意しました。
初心者さん向けのかなり初歩的な内容から、いろいろカスタマイズを加えた応用編まで解説していきます。
メインビジュアルの作例5つ(#11 ~ #15)については、Swiperのカスタマイズ方法だけでなく、アニメーションやデザインの参考になればと思い様々なパターンで作成してみました。
アレンジがしやすいよう、いずれもコードが複雑になりすぎない範囲(のつもり)でカスタマイズしていますので、ぜひご覧ください。
本記事では Swiper v8.1.4(記事執筆時の最新)を使用しています。
Swiper 5系からはIEはサポート対象外となっています。IE対応が必要な場合は 4系 をご利用頂き、バージョンに合わせてオプションなどの書き換えを行う必要があります。
目次
- 1 Swiperってどんなプラグイン?
- 2 Swiperの導入方法
- 3 基本のHTML構造・クラス名
- 4 Swiperのオプション一覧
- 5 よく使うオプションを盛り込んだ初期化コードサンプル
- 6 #01 基本 基本のスライダー
- 7 #02 基本 右側だけはみ出た形のスライダー
- 8 #03 基本 コンテンツ幅からはみ出たスライドを薄くする
- 9 #04 応用 ブレークポイント切り替えでSPだけスライダーにする
- 10 #05 応用 総スライド数が slidesPerView を超える時だけスライダーにする
- 11 #06 応用 ゆっくり動き続ける無限ループスライダー
- 12 #07 基本 サムネイル(スライダー)を付けて連動させる
- 13 #08 応用 サムネイル(非スライダー)を付けて連動
- 14 #09 応用 スライダーの向きを交互に変える
- 15 #10 応用 スライダーを入れ子にする
- 16 #11 基本 メインビジュアル フェードアニメーション
- 17 #12 応用 始めと終わりで別々のアニメーションを付ける
- 18 #13 応用 縦方向のスライダー
- 19 #14 応用 スライドごとに表示時間を変えて、進捗状況と連動したプログレスバーを作成する
- 20 #15 応用 お手軽パララックス+スライド外のコンテンツと連動させる
- 21 同じページに同じスライダーを複数設置する方法
- 22 まとめ
Swiperってどんなプラグイン?
はじめに、Swiperの特徴を簡単にご紹介します。
Swiperのメリット
- ・jQuery非依存
- ・オプション・コールバック関数が豊富でカスタマイズ性が高い
- ・ドラッグ(スワイプ)したときの操作感が良い
- ・活発に開発されている
- ・利用者数が多く、日本語の参考記事も多い
SwiperはjQuery非依存なので、脱jQueryを求める方や、要件としてjQueryが使えないプロジェクトの場合はまず候補に挙がると思います。
また、オプション・コールバック関数が非常に多く用意されているのが特徴で、柔軟なカスタマイズが可能となっています。
そして個人的に気に入っているポイントが、「ドラッグ(スワイプ)したときの操作感が良い」というところ。
比較対象としてslickを挙げますが、slickで実装したスライダーにはドラッグでの移動量に制限があり、たくさんドラッグしても少ししか移動できない仕様です。
一方Swiperで実装したものは、ドラッグ量と移動量が自然に連動するストレスフリーな操作感になっています。スライド数が多い場合や、なるべくたくさん見てほしい!というときはSwiperのほうがお勧めです。
Swiperのデメリット
- ・たくさんの機能を把握するのが大変
- ・容量が大きい
- ・公式ドキュメントが英語
多彩な機能があるため全てを把握することが難しく、「このオプション使えばもっと簡単にできた…!」とあとで気付くということもしばしば。
そして、機能が多いだけあってファイル容量も大きいです。
(jQueryを読み込まないならその分軽い、と考えることもできますが)
※Webpackでバンドルする場合は必要なモジュールだけをインポートすることができるので、容量を削減できそうです。
Swiperの導入方法
続いて基本的な導入の流れをご説明します。
公式サイトで分かりやすく説明されているので、その流れに沿って簡単にまとめました。
01 Swiperのインストール
以下の3つの方法でインストールが可能です。
- NPMでインストール
- CDNを利用
- ファイルをダウンロードして利用
詳しくは公式サイト Get Started をご確認ください。
とりあえず手軽に試してみたい、という方はCDNかファイルをダウンロードで進めてみてください。
本記事のデモではファイルをダウンロードして利用しています。
ファイルをダウンロードする場合
Download assets に記載されているリンク先(現在は v8)からCSSとJSをダウンロードします。
CSSが2種類あるのですが、読み込むのはどちらか一方だけでOKです。
swiper-bundle.min.css のほうだと何もCSSを書かなくてもある程度スライダーの形が出来上がるので、初心者さんはこちらのほうがやりやすいと思います。ただ、その分ファイル容量は大きくなります。
swiper.min.css のほうは装飾なしで必要最低限のスタイルのみになっているので、オリジナルデザインで実装するならこちらのほうが無駄が少ないです。
※本記事デモでは swiper.min.css を使用しています。
ダウンロードしたファイルをHTMLで読み込む
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>Swiper DEMO</title> <link rel="stylesheet" href="path/swiper.min.css" /> </head> <body> CONTENTS <script src="path/swiper-bundle.min.js"></script> </body> </html> |
02 HTMLにスライド要素を追加
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!-- Slider main container --> <div class="swiper"> <!-- Additional required wrapper --> <div class="swiper-wrapper"> <!-- Slides --> <div class="swiper-slide">Slide 1</div> <div class="swiper-slide">Slide 2</div> <div class="swiper-slide">Slide 3</div> ... </div> <!-- If we need pagination --> <div class="swiper-pagination"></div> <!-- If we need navigation buttons --> <div class="swiper-button-prev"></div> <div class="swiper-button-next"></div> <!-- If we need scrollbar --> <div class="swiper-scrollbar"></div> </div> |
こちらが基本の作りです。
.swiper .swiper-wrapper .swiper-slide の3つは必須です。
.swiper-wrapper と .swiper-slide の間に他の要素を割り込ませたりするとうまく動かなくなるのでご注意ください。
その他の要素は必要なときだけ追加しましょう。
.swiper の中には他の独自コンテンツを追加しても大丈夫です。
それぞれの役割については次の 基本のHTML構造・クラス名 で説明しています。
03 JSでスライダーの初期化を行う
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
const mySwiper = new Swiper('.swiper', { // Optional parameters loop: true, // If we need pagination pagination: { el: '.swiper-pagination', }, // Navigation arrows navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }, // And if we need scrollbar scrollbar: { el: '.swiper-scrollbar', }, }); |
JSにて上記のようにスライダーの初期化を行います。
ここまで行うとスライダーが動き出します!
下で よく使うオプションを盛り込んだ初期化コードサンプル もご紹介していますのでご活用ください。
04 CSSでデザイン調整を行う
最後にCSSでデザインの調整をしたら実装完了となります。
本記事デモと同じ swiper.min.css を利用している場合、初期化しただけの状態だとページネーションなどが表示されません。
「上手く動いていないのかな?」と思う方もいるかもしれませんが、落ち着いてソースを確認し、生成されている要素に対してスタイルを当てていきましょう。
基本のHTML構造・クラス名
デザインやアニメーションをカスタマイズするときのために、基本構造をざっくり把握しておきましょう。
各クラス名はパラメータで指定すれば任意のクラス名に変えることもできますが、本記事では全てデフォルトのままという前提で説明しています。
.swiper |
スライダー全体を囲むコンテナ(※バージョン6以前では .swiper-container )。 このエリア内にスライド要素が収まる形。 はみ出させたい場合は overflow: visible; で上書きします。 |
.swiper-wrapper |
.swiper-slide(各スライド)を囲む要素。 これを transform で移動させることでスライダーの動きを実現しています。 .swiper-wrapper の直下には .swiper-slide だけを入れます。 |
.swiper-slide |
この中に各スライドの要素を入れます。 デザインを調整する際、.swiper-slide に直接スタイルを当てると不具合に繋がる場合があるので要注意。 以下のように中身を囲う要素を作って、それに対してスタイルを当てるのがお勧めです。 <div class="swiper-slide">
<div class="item"> <img src="img.jpg" alt=""> <p class="text">テキストが入ります</p> </div> </div> |
.swiper-pagination | ページネーション |
.swiper-button-prev | .swiper-button-next |
前へ / 次へボタン |
.swiper-button-disabled | 前のスライド / 次のスライドがないときに付くクラス名 |
.swiper-scrollbar | スクロールバー |
.swiper > .swiper-wrapper > .swiper-slide の構造は守る必要があります。
.swiper-wrapper と .swiper-slide の間に他の要素を割り込ませたりするとうまく動かなくなるのでご注意ください。
それ以外の制限はあまりなく、ページネーション、前へ / 次へボタン、スクロールバーは .swiper の外に出しても問題なく動作します。
.swiper-slide-active |
アクティブなスライドに付くクラス名。 ループモード時は状況によって .swiper-slide-duplicate-active が付く。 |
.swiper-slide-prev |
アクティブなスライドの前のスライドに付くクラス名。 ループモード時は状況によって .swiper-slide-duplicate-prev が付く。 |
.swiper-slide-next |
アクティブなスライドの次のスライドに付くクラス名。 ループモード時は状況によって .swiper-slide-duplicate-next が付く。 |
.swiper-slide-visible |
※ watchSlidesProgress: true のときのみ 表示状態のスライドに付くクラス名。 |
.swiper-slide-duplicate | ループモード時に複製されたスライドに付くクラス名。 |
こちらは現在のスライドの状況に応じて動的に追加されるクラス名です。
デザインやアニメーションのカスタマイズにはこのクラスを利用していきます。
ループモード時は「-duplicate」が間に入った別のクラスになる場合があるのでご注意ください。
詳しくは ループモード時の注意 で説明しています。
Swiperのオプション一覧
本記事で使用しているものを中心に、よく使うオプションをまとめました。
先にこれだけ読んでもよく分からないと思いますので、まずはデモを見てから、使用されているオプションを確認しに来て頂ければと思います。
パラメータ
公式サイトの一覧はこちら:Parameters
パラメータ | タイプ | デフォルト値 | 説明 |
---|---|---|---|
allowTouchMove | boolean | true | false:ドラッグ(スワイプ)でのスライド切り替えを無効にする。 |
autoplay | boolean | AutoplayOptions | ||
{ | |||
delay | boolean | 3000 |
次のスライドに切り替わるまでの時間を指定(ミリ秒)。 data-swiper-autoplay 属性を利用して、HTML側で個別に値を指定することも可能。 |
disableOnInteraction | boolean | true |
true:ユーザーが操作したときに自動再生を止める。 false にしておくのがお勧め。 |
reverseDirection | boolean | false | 自動再生の進行方向を逆にする。 |
waitForTransition | boolean | true |
true:スライド切り替えのアニメーションの間は自動再生を止める。 true だと1枚目のスライドだけ表示時間が短くなるため、表示時間を揃えたいなら false にするのがお勧め。 |
} | |||
breakpoints | object |
ブレークポイントごとにパラメータを変更する。 < 例 > breakpoints: {
// when window width is >= 320px 320: { slidesPerView: 2, spaceBetween: 20 }, // when window width is >= 640px 640: { slidesPerView: 4, spaceBetween: 40 } } |
|
centeredSlides | boolean | false | true:アクティブなスライドが中央に来るようにする。 |
direction | ‘horizontal’ | ‘vertical’ | ‘horizontal’ | ‘vertical’:スライド方向を垂直方向にする。 |
effect | ‘slide’ | ‘fade’ | ‘cube’ | ‘coverflow’ | ‘flip’ | ‘creative’ | ‘cards’ | ‘slide’ |
エフェクトのタイプを指定。 詳しくは 公式のデモ をご覧ください。 |
fadeEffect | FadeEffectOptions | ※ effect: ‘fade’ のときのみ | |
{ | |||
crossFade | boolean | false |
true:スライドのクロスフェードを有効にする。 下のコンテンツが重なって出てしまわないように true がお勧め。 |
} | |||
followFinger | boolean | true |
true:ドラッグ(スワイプ)と連動してスライダーが動き、前後のスライドが見えてくるようにする。 false:ドラッグ(スワイプ)中はスライダーを動かさない。アクティブなスライドにCSSアニメーションを適用するケースなどでは false のほうがお勧め。 |
freeMode | boolean | FreeModeOptions | false |
true:自由にドラッグ(スワイプ)できるようにする。スライド位置がスナップしなくなる。 下の詳細設定が必要なければ freeMode: true だけでOK。 |
{ | |||
enabled | boolean | true:自由にドラッグ(スワイプ)できるようにする。スライド位置がスナップしなくなる。 | |
momentum | boolean | true | false:ドラッグ(スワイプ)した後の慣性スクロールをオフにする。 |
} | |||
grabCursor | boolean | false | true:PCでホバー時にマウスカーソルを「掴む」マークにする。 |
loop | boolean | false | true:無限ループさせる。 |
loopAdditionalSlides | number | 0 |
※ loop: true のときのみ 複製するスライド数を指定。0 だとループが滑らかに繋がらないことがあるため 1 以上がお勧め。 |
mousewheel | boolean | MousewheelOptions |
true:マウスホイールによるスライド切り替えを有効にする。 下の詳細設定が必要なければ mousewheel: true だけでOK。 |
|
{ | |||
forceToAxis | boolean | false | true:スライド方向とスクロール方向が一致しているときだけ有効にする。水平方向のスライダーなら水平方向のスクロールのみ、垂直方向のスライダーなら垂直方向のスクロールのみ可能となる。 |
invert | boolean | false | true:スクロール方向とスライドの動く向きを逆にする。 |
} | |||
nested | boolean | false | true:スライダーを入れ子にしているときにタッチイベントを正しく取得する。親子のスライド方向が同じ場合のみ使用。 |
pagination | boolean | PaginationOptions | ||
{ | |||
clickable | boolean | false | true:クリックでのスライド切り替えを有効にする。押せそうなデザインなら true にしておくのがお勧め。 |
type | ‘bullets’ | ‘fraction’ | ‘progressbar’ | ‘custom’ | ‘bullets’ |
表示タイプを指定。 ‘bullets’:スライド枚数分のドットが作られる。 ‘fraction’:分数で表示する(例:1 / 10)。 ‘progressbar’:スライドの進捗に応じてバーが伸びていく。 ‘custom’:出力内容をカスタマイズ。renderCustom で書式設定が必要。 |
renderBullet | function(index, className) |
※ type: ‘bullets’ のときのみ < 01、02…とスライド番号を入れたい場合の例 > renderBullet: (index, className) => {
let num = ('00' + (index + 1)).slice(-2); return '' + num + ''; }, |
|
renderCustom | function(swiper, current, total) |
※ type: ‘custom’ のときのみ 出力内容を指定。 |
|
} | |||
roundLengths | boolean | false | true:スライドの横幅・高さの小数点以下を四捨五入して、中の画像や文字がぼやけないようにする。 |
slideToClickedSlide | boolean | false | true:クリックしたスライドに移動させる(アクティブにする)。 |
slidesPerView | number | ‘auto’ | 1 |
表示させるスライドの枚数を指定。 指定した枚数分がコンテナ内に収まるように調整される。 小数点以下の値も指定可能( 1.5 など)。 CSSでサイズ調整したい場合は ‘auto’ を指定。 |
spaceBetween | number | 0 |
スライド間の余白を指定(px)。 CSSで margin を付けるとスライドの位置がずれていくことがあるため、こちらで指定するのが推奨。 |
speed | number | 300 | スライド切り替えのアニメーションのスピードを指定(ミリ秒)。 |
thumbs | ThumbsOptions | ||
{ | |||
swiper | Swiper | null | サムネイルのスライダーと連動させる場合、サムネイルのスライダーのSwiperインスタンス名を指定。 |
} | |||
watchSlidesProgress | boolean | false | true:各スライドの進捗状況を監視する。表示状態のスライドに .swiper-slide-visible のクラスが付くようになる。 |
プロパティ・メソッド
公式サイトの一覧はこちら:Methods & Properties
プロパティ
プロパティ | 説明 |
---|---|
swiper.activeIndex | アクティブなスライドのインデックス番号を取得。 |
swiper.realIndex |
アクティブなスライドのインデックス番号を取得。 ※ループモードの場合は .activeIndex ではなくこちらを使用 |
swiper.params |
初期化時のパラメータの値を取得。 例:mySwiper.params.speed |
メソッド
メソッド | 説明 |
---|---|
swiper.destroy(deleteInstance, cleanStyles) |
スライダーを無効化する。 deleteInstance:インスタンスを削除するかどうか(boolean)|デフォルトは true cleanStyles:スライダー要素の不要なスタイルを削除するかどうか(boolean)|デフォルトは true |
swiper.getTranslate() | スライダーの現在の translate の値を取得。 |
swiper.setTranslate(translate) | スライダーの translate の値を書き換える。 |
swiper.slideTo(index, speed, runCallbacks) |
指定したインデックス番号のスライドへ移動。 |
swiper.slideToLoop(index, speed, runCallbacks) |
指定したインデックス番号のスライドへ移動。 ※ループモードの場合は slideTo() ではなくこちらを使用 |
イベント
公式サイトの一覧はこちら:Events
スライド切り替え
似たような項目が多くてタイミングが分かりにくいので、自動再生をオンにしているときの発火する順でまとめてみました。スライド切り替えのたびに繰り返しこの順番で発火します。
このタイミングの差を利用すれば、思い通りのアニメーションを実装しやすいと思います。
※ユーザー操作によりスライドを切り替えたときや、フェードモードとスライドモードでは挙動に細かな違いが出ます。
発火順 | イベント名 | タイミング |
---|---|---|
1 | setTransition | アニメーションを開始するたび |
2 | setTranslate | .swiper-wrapper の位置(translate)が変わるたび |
3 | activeIndexChange | realIndexChange |
スライドのインデックス番号が変わるとき ※ realIndexChange はループモード用 |
4 | slideChange | アクティブなスライドが変わるとき |
5 | beforeTransitionStart | アニメーション開始前 |
6 | transitionStart | アニメーション開始時 |
7 | slideChangeTransitionStart | スライド切り替えのアニメーション開始時 |
8 | setTransition | (1と同じ) |
9 | transitionEnd | アニメーション終了後 |
10 | slideChangeTransitionEnd | スライド切り替えのアニメーション終了後 |
初期化
発火順 | イベント名 | タイミング |
---|---|---|
1 | beforeInit | 初期化直前 |
自動再生を有効にしている場合はここで上記「スライド切り替え」の1~10が発火 | ||
2 | init | Swiperの初期化直後 |
3 | afterInit | 初期化直後 |
操作
イベント名 | タイミング |
---|---|
beforeResize | resize ハンドラの前 |
touchEnd | クリック後または指が離れたとき |
よく使うオプションを盛り込んだ初期化コードサンプル
前章のまとめとして、使用頻度が高いと思われるパラメータを一通り盛り込んだコードをご用意してみました!
実装の際にご活用頂ければと思います。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 |
const mySwiper = new Swiper('.swiper', { effect: 'fade', // フェードモードにする(デフォルトは 'slide') fadeEffect: { crossFade: true, // クロスフェードを有効にする(フェードモードの場合 true 推奨) }, slidesPerView: 1, // コンテナ内に表示させるスライド数(CSSでサイズ指定する場合は 'auto') spaceBetween: 0, // スライド間の余白(px) centeredSlides: true, // アクティブなスライドを中央に配置する loop: true, // 無限ループさせる loopAdditionalSlides: 1, // 無限ループさせる場合に複製するスライド数 speed: 300, // スライドアニメーションのスピード(ミリ秒) autoplay: { // 自動再生させる delay: 3000, // 次のスライドに切り替わるまでの時間(ミリ秒) disableOnInteraction: false, // ユーザーが操作しても自動再生を止めない waitForTransition: false, // アニメーションの間も自動再生を止めない(最初のスライドの表示時間を揃えたいときに) }, grabCursor: true, // PCでマウスカーソルを「掴む」マークにする watchSlidesProgress: true, // スライドの進行状況を監視する pagination: { el: '.swiper-pagination', // ページネーション要素のクラス clickable: true, // クリックによるスライド切り替えを有効にする type: 'bullets' // 'bullets'(デフォルト) | 'fraction' | 'progressbar' }, navigation: { nextEl: '.swiper-button-next', // 「次へ」ボタン要素のクラス prevEl: '.swiper-button-prev', // 「前へ」ボタン要素のクラス }, scrollbar: { el: '.swiper-scrollbar', // スクロールバー要素のクラス }, thumbs { swiper: mySwiper2 // サムネイルのスライダーのインスタンス名 }, breakpoints: { // ブレークポイント 600: { // 画面幅600px以上で適用 slidesPerView: 2, }, 1025: { // 画面幅1025px以上で適用 slidesPerView: 4, spaceBetween: 32, } }, on: { // イベントを登録する slideChange: (swiper) => { console.log('Slide index changed to: ' + (swiper.realIndex + 1)); }, }, }); |
#01 基本 基本のスライダー
それではここから本題のデモの解説に入っていきます。
まずは最もよく見るタイプのごく普通のスライダーから。
前へ / 次へボタンだけがコンテンツ幅の外に出ているデザインって頻出ですよね。
よく見るタイプでありながら少し調整しにくいところもあるので、初心者さん向けにポイントとして挙げました。
デモのポイント
- はみ出させたい要素があれば .swiper の外に出す
- 前へ / 次へボタンをスライドに対して上下中央揃えにする
- ホバー効果でスライドを動かしたり、影を付けたりする場合の調整
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
const mySwiper = new Swiper('.card01 .swiper', { slidesPerView: 1, spaceBetween: 24, grabCursor: true, pagination: { el: '.card01 .swiper-pagination', clickable: true, }, navigation: { nextEl: '.card01 .swiper-button-next', prevEl: '.card01 .swiper-button-prev', }, breakpoints: { 600: { slidesPerView: 2, }, 1025: { slidesPerView: 4, spaceBetween: 32, } }, }); |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
<div class="card01 l-section"> <div class="l-inner"> <div class="swiper-area"> <div class="swiper"> <div class="swiper-wrapper"> <a href="#" class="swiper-slide"> <article class="slide"> <div class="slide-media img-cover"><img src="https://picsum.photos/id/139/800/500" alt=""></div> <div class="slide-content"> <time class="slide-date" datetime="2021-12-01">2021.12.01</time> <h2 class="slide-title">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h2> </div> </article> </a> ⋮ <a href="#" class="swiper-slide"> <article class="slide"> <div class="slide-media img-cover"><img src="https://picsum.photos/id/127/800/500" alt=""></div> <div class="slide-content"> <time class="slide-date" datetime="2021-12-01">2021.12.01</time> <h2 class="slide-title">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h2> </div> </article> </a> </div><!-- /swiper-wrapper --> </div><!-- /swiper --> <div class="swiper-button-prev"></div> <div class="swiper-button-next"></div> </div><!-- /swiper-area --> <div class="swiper-pagination"></div> </div> </div> |
はみ出させたい要素があれば .swiperの外に出す
前へ / 次へボタンをコンテンツ幅からはみ出させようとすると、.swiper に overflow: hidden; がかかっているため上手くいきません。
そういうときは .swiper の外に出してしまうのが一番簡単です。
position 調整のための親要素(ここでは .swiper-area )で囲っておき、.swiper-button-prev と .swiper-button-next を .swiper の外に出してしまえばシンプルに解決できます。
前へ / 次へボタンをスライドに対して上下中央揃えにする
前へ / 次へボタンはスライドの高さに対して上下中央揃えのデザインになっていることが多いと思います。
ですが、ページネーションがあるとその分の高さも含まれてしまいボタンの位置がずれてしまいます。
この場合でも .swiper の外に出してしまうのが早いです。
前へ / 次へボタンがいる階層よりも外に .swiper-pagination を出してしまえばOK。
ホバー効果でスライドを動かしたり、影を付けたりする場合の調整
スライドに影を付けていたり、ホバー効果でスライドの位置を動かしたりしている場合、そのままだと .swiper に overflow: hidden; がかかっているので切れてしまいます。
なので、はみ出させたい分だけ .swiper に padding を付けておくようにします。
本記事のデモでは、ホバー時にスライドを上に 16px 動かす効果を付けているので、.swiper に padding-top: 16px を付けています。
#02 基本 右側だけはみ出た形のスライダー
こちらもよく見るタイプのスライダー。
「スライダーの左端がコンテンツ幅に揃っていて、かつ右側だけはみ出ている」というデザインです。
また、デモ01では slidesPerView でスライドの横幅を制御していましたが、こちらではCSSのほうで固定値を指定するパターンをご紹介しています。
デモのポイント
- 初期状態で右側だけコンテンツ幅からはみ出る
- スライドの横幅を固定値(px)にする
- 前へ / 次へボタンとページネーションを横並びにする
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
const mySwiper = new Swiper('.card02 .swiper', { slidesPerView: 'auto', spaceBetween: 16, grabCursor: true, pagination: { el: '.card02 .swiper-pagination', clickable: true, }, navigation: { nextEl: '.card02 .swiper-button-next', prevEl: '.card02 .swiper-button-prev', }, breakpoints: { 1025: { spaceBetween: 32, } }, }); |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
<div class="card02 l-section"> <div class="l-inner"> <div class="swiper"> <div class="swiper-wrapper"> <a href="#" class="swiper-slide"> <article class="slide"> <div class="slide-media img-cover"><img src="https://picsum.photos/id/139/800/500" alt=""></div> <div class="slide-content"> <time class="slide-date" datetime="2021-12-01">2021.12.01</time> <h2 class="slide-title">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h2> </div> </article> </a> ⋮ <a href="#" class="swiper-slide"> <article class="slide"> <div class="slide-media img-cover"><img src="https://picsum.photos/id/127/800/500" alt=""></div> <div class="slide-content"> <time class="slide-date" datetime="2021-12-01">2021.12.01</time> <h2 class="slide-title">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h2> </div> </article> </a> </div><!-- /swiper-wrapper --> <div class="swiper-controller"> <div class="swiper-pagination"></div> <div class="swiper-button-prev"></div> <div class="swiper-button-next"></div> </div> </div><!-- /swiper --> </div> </div> |
初期状態で右側だけコンテンツ幅からはみ出る
左だけ余白が付いていればいいから横幅は100%にして margin-left を付けて…のような調整をし始めると、あまり上手くいきません。
「基準位置はコンテンツ幅にしつつ、そこからはみ出させたい」ときは、.swiper にかかっている overflow: hidden; を visible で上書きしましょう。そして代わりに親要素のほうに overflow: hidden; をかけておくようにします。
1 2 3 4 5 6 |
.card02 { overflow: hidden; |