Swiperでスライドを切り替える前後の矢印ボタンを実装すると、最初のスライドでは「前へ」、最後のスライドでは「次へ」を押せない状態にしたいことがありませんか？
デザインカンプでは、押せない矢印を非表示にせずに薄い色で残して「このボタンは押せません」というのを表現していることがたまにあります。
駆け出しの頃、先頭の「前へ」ボタンだけが薄いデザインを見て、その意図は分かったものの、どうやってボタンを非表示せずに残しつつ、でも押せないようにする、という実装方法が分からず詰まりました。
結論からいうと、Swiperが自動で付けるswiper-button-disabledというクラスにCSSを当てれば実現できます。
矢印を消さず、押せない状態として残す方法を順に見ていきましょう！
本記事の執筆者：マサトラ
フリーランス歴4年のWebエンジニア。現在は20社以上のWeb制作会社社様と提携し、WordPress構築やLP制作を中心に月3～5件のペースでサイト制作を手がけています。
このブログでは、実務で得た知識やノウハウ、制作現場での気づきを、フリーランスとして活動中の方はもちろん、これからWeb制作を仕事にしたいと考えている方にも役立つよう発信しています。
完成形：スライドの先頭と終端では矢印を薄く残す
最初のスライドでは「前に戻る矢印」が薄くなり、最後のスライドでは「次へ進む矢印」が薄くなります。途中のスライドでは両方の矢印を操作できます。
ここで大切なのは、薄い矢印を単なる飾りにしないことです。button要素を使えば、Swiperが無効なときにdisabled状態も扱えるため、見た目と操作可否をそろえやすくなります。
See the Pen Swiper：終端でも矢印を残して無効状態を見せる by Sugar (@ms_da_13) on CodePen.
先頭のスライドから「次へ進む矢印」を押すと、最初は薄かった「前へ戻る矢印」が有効になり、最後のカードでは「次へ進む矢印」が薄くなります。
埋め込みが表示されない場合は、CodePenでデモを開くこともできます。
結論：swiper-button-disabledをCSSで整える
Navigationを有効にしたSwiperは、先頭・終端など進めない方向のボタンへ、既定でswiper-button-disabledを付けます。
disabledClassは、この無効状態で付くクラス名を指定するためのSwiperの設定です。既定値を使うなら、JavaScriptに改めて書く必要はありません。
つまり、次のように.swiper-button-disabledの見た目を調整すればOKです。
/* Swiperが先頭・終端で自動付与するクラス */
.news-slider__button.swiper-button-disabled {
/* 消さずに薄くして、押せない状態を伝える */
opacity: 0.3;
cursor: default;
}display: noneやvisibility: hiddenをここに指定すると、矢印は消えてしまいます。デザインどおりに残したい場合は指定しません。
実装手順
完成形を、HTML、JavaScript、CSSの順に組み立てます。順を追って見ていきましょう。
手順1：前後ボタンをbuttonで用意する
矢印はdivではなくbuttonにしておくと、無効なときの操作可否も扱いやすくなります。
<section class="news-slider">
<div class="swiper js-news-swiper">
<!-- スライドとして見せるカードを並べる -->
<div class="swiper-wrapper">
<article class="swiper-slide news-card">お知らせ 01</article>
<article class="swiper-slide news-card">お知らせ 02</article>
<article class="swiper-slide news-card">お知らせ 03</article>
</div>
<!-- Swiperに前後操作として渡すボタン -->
<div class="news-slider__controls">
<button class="news-slider__button js-news-prev" type="button" aria-label="前のお知らせへ"></button>
<button class="news-slider__button js-news-next" type="button" aria-label="次のお知らせへ"></button>
</div>
</div>
</section>手順2：Navigationを有効にしてボタンを紐付ける
次はSwiperのオプションをJSで設定しましょう。
loopはfalseにします。loop: trueでは先頭・終端を越えて循環できるため、今回のような無効状態は発生しません。
new Swiper('.js-news-swiper', {
// 最初と最後で止める。これにより無効状態が発生する
loop: false,
slidesPerView: 1,
spaceBetween: 16,
navigation: {
// HTMLで置いた「次へ」ボタンを指定する
nextEl: '.js-news-next',
// HTMLで置いた「前へ」ボタンを指定する
prevEl: '.js-news-prev'
}
});この時点でSwiperが先頭・終端を判定し、操作できない方のボタンにswiper-button-disabledを付けます。
独自のクラス名に変えたいときだけ、disabledClass: 'is-disabled'をnavigationの中へ追加してください。
手順3：通常時と無効時の見た目をCSSで分ける
通常時の矢印を整えたうえで、swiper-button-disabledだけを薄くします。
buttonを使っている場合、Swiperは無効時にdisabledも扱うため、クリックやキーボード操作で先へ進むことはありません。
/* ボタンの大きさを確保して、押せる範囲を分かりやすくする */
.news-slider__button {
display: grid;
width: 44px;
height: 44px;
place-items: center;
border: 1px solid #1a1a1a;
border-radius: 50%;
background: #fff;
color: #1a1a1a;
cursor: pointer;
}
/* アイコンは疑似要素で表示する。文字の「前へ」「次へ」は出さない */
.js-news-prev::before { content: '←'; }
.js-news-next::before { content: '→'; }
/* 先頭・終端でSwiperが付ける無効状態。矢印は消さずに残す */
.news-slider__button.swiper-button-disabled {
opacity: 0.3;
cursor: default;
}薄くするだけでは状態が伝わりにくいデザインなら、枠線色・背景色も変えてもいいかもしれません。
ただし、色の違いだけに頼らず、実際に無効化されるbuttonを使うことが重要です。
disabledClassはいつ指定する？
既定のswiper-button-disabledで困らなければ、disabledClassは不要です。サイト全体のSwiperで同じ名前が競合する、または任意の命名規則に合わせたいときだけ指定します。
navigation: {
nextEl: '.js-news-next',
prevEl: '.js-news-prev',
// 無効時に付けるクラス名を、独自名へ変更する
disabledClass: 'news-slider__button--disabled'
}この場合はCSS側も.news-slider__button--disabledに変更します。標準クラスと独自クラスを混ぜると、なぜスタイルが反映されないのか追いにくくなるため、どちらかに統一しましょう。
矢印が消えるときに確認すること
Swiperの標準スタイルでは無効ボタンは薄く表示されます。それでも消える場合は、プロジェクト側のCSSが上書きしている可能性があります。
.swiper-button-disabledにdisplay: noneやvisibility: hiddenが付いていないかopacity: 0が付いていないかhideOnClick: trueを設定していないかloop: trueにして、そもそも終端をなくしていないかdisabledClassを独自名に変えたのに、CSSが既定のクラスを見ていないか
特に、他の案件から流用したSwiper用CSSに「無効ボタンは隠す」という指定が残っていることがあります。DevToolsで対象ボタンを選び、実際に付いているクラスとdisplay・opacityの最終値を確認すると原因を切り分けやすいです。
1枚のときの対応とは別に考える
以下記事で扱った「Swiperが1枚のときは動かさない」は、Swiperを作る前の件数判定です。一方、この記事は複数枚のSwiperを動かしている最中に、先頭・終端のボタン状態を見せる方法です。
お知らせ投稿やカスタム投稿のように件数が変わる場所では、次のように分けて考えると整理しやすくなります。
- 0件: セクションを出さない、または「お知らせはありません」と表示する
- 1枚: Swiperを初期化せず、通常のカードとして表示する
- 2枚以上: Swiperを初期化し、先頭・終端では矢印を薄く残す
まとめ
Swiperの前後矢印を終端でも残したいときは、loop: falseで先頭・終端を作り、Swiperが自動で付けるswiper-button-disabledをCSSで整えます。
矢印を消すのではなく、薄く残して実際に操作できない状態にする。これだけで、デザインカンプの意図を再現しながら、ユーザーにも今の操作状態を伝えやすくなりますね。
