【Swiper】スライドするタブ切り替えを実装する

こんにちは、Ryohei（@ityryohei）です！

本記事では、Swiperを使用してスライドするタブ切り替えを実装する方法をご紹介しています。

一般的なタブ切り替えはタブメニューをクリックすると、メニュー項目に応じたコンテンツが瞬間的にスイッチのように切り替わりますが、これを「Swiper」というJavaScriptのスライダーを使用すると下記のデモのようなタブ切り替えを実装することができます。

DEMO

See the Pen
Tab | Swiper by ryohei (@intotheprogram)
on CodePen.

WordPressの有名なテーマや、スマホのニュースアプリなとで採用されていますので、見かけたことがある方も多いのではないでしょうか。

実装方法は異なるかもしれないですが、Swiperでも似たようなタブ切り替えを実装することができます。デフォルトでいくつかのエフェクトが用意されていますので、ひと味違うタブ切り替えをお探しの方にぜひ試していただければと思います！

では、解説していきます。

Swiper本体を読み込む

まずはSwiper本体を読み込みます。

SwiperはJavaScriptのスクリプトになります。そのためSwiperを使用する場合は別途本体のライブラリファイルを読み込む必要があります。ダウンロードする方法とCDNを利用する方法がありますが、ダウンロードされる方は公式サイトへ、CDNで利用される場合は下記をスライダーを実装するファイルに読み込みましょう。

<!-- Swiper CSS -->
<link rel="stylesheet"href="https://unpkg.com/swiper/swiper-bundle.min.css">
<!-- Swiper JS -->
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

以上でSwiper本体の読み込みは完了です。ではタブ切り替えを実装していきましょう。

タブメニューとタブコンテンツで使用するスライダーを設置する

Swiperでタブ切り替えを実装する方法はいくつかありますが、本記事では二つのスライダーを使って、片方をタブメニューに、もう片方をタブコンテンツとして使用する方法で解説を進めていきます。

まずはタブメニューとタブコンテンツのHTMLを用意します。

HTML

<div id ="app">
    <div class="swiper-container tab-menu">
        <div class="swiper-wrapper">
            <div class="swiper-slide">Tab 1</div>
            <div class="swiper-slide">Tab 2</div>
            <div class="swiper-slide">Tab 3</div>
            <div class="swiper-slide">Tab 4</div>
        </div>
    </div>
    <div class="swiper-container tab-content">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <h1>Tab 1</h1>
                //ここにTab 1のコンテンツを追加
            </div>
            <div class="swiper-slide">
                <h1>Tab 2</h1>
                //ここにTab 2のコンテンツを追加
            </div>
            <div class="swiper-slide">
                <h1>Tab 3</h1>
                //ここにTab 3のコンテンツを追加
            </div>
            <div class="swiper-slide">
                <h1>Tab 4</h1>
                //ここにTab 4のコンテンツを追加
            </div>
        </div>
    </div>
</div>

SCSSでざっくりとスタイルを付けておきます。現在表示されているアクティブなタブには「swiper-slide-thumb-active」というクラスが付与されます。アクティブ時のスタイルを変更したい場合はこのクラスを利用してスタイルを付けましょう。

SCSS

.tab-menu {

    .swiper-wrapper {

        .swiper-slide {
            padding: 20px 0;
            text-align: center;
            color: #555555;
            background-color: #ffffff;;
            cursor: pointer;
            border-right: 2px solid #2f3640;
            
            &:last-child {
                border: 0;
            }
        }
        
        .swiper-slide-thumb-active {
            background-color: #cccccc;
        }
    }
}


.tab-content {
    
    .swiper-wrapper {
        
        .swiper-slide {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            
            h1 {
                width: 100%;
                margin: 20px 0;
                color: white;
                font-size: 1.5rem;
            }
            
            .post {
                width: calc(94% / 3);
                margin: 0 0 28px 0;
                background-color: #ffffff;
                
                a {
                    display: block;
                    text-decoration: none;
                    img {
                        width: 100%;
                    }
                    
                    h2 {
                        padding: 10px;
                        color: #555555;
                        font-size: 1.14rem;
                        font-weight: bold;
                    }
                    
                    p {
                        padding: 0 10px 10px 10px;
                        color: #555555;
                    }
                }
            }
        }
    }
}

良い感じにざっくりとスタイルを付けることができました。
後はこれらの要素がタブとして機能するように設定するだけです。Swiperオブジェクトに色々と追記してスライドが動くようにしていきましょう。

二つの要素が連動して動くようにする設定する

スクリプトに簡単に設定を追加します。「autoHeight」をtrueにしておくと、内容に応じて高さを調整してくれるので、おすすめです。「thumbs」の部分でタブメニューに使用する要素とSwiperの設定を指定しています。

var tab = new Swiper('.tab-content', {
    //タブコンテンツ
    slidesPerView: 1,
    autoHeight: true, 
    
    //タブメニュー
    thumbs: {
        swiper: {
            el: '.tab-menu',
            slidesPerView: 4,
        }
    },
});

以上でSwiperによるタブ切り替えの実装は完了です。

他にも色々な設定が用意されているので、一度公式のドキュメントに目を通しておくことで理解が深まるのでおすすめです。

https://swiperjs.com/api/

最後に

またまたSwiperの記事になってしまいましたが、Swiperは触っていて楽しいですし、あれがしたい！これがしたい！　と実装したいものが次々浮かんでくるので、しばらくSwiperネタがつづくかもしれないです。飽きずに見守っていただければ幸いです。もちろん違うカテゴリの記事も投稿していきますので、そちらも楽しみにしていただければと思います！

以上、Swiperでスライドするタブ切り替えを実装する方法のご紹介でした！