こんにちは、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でスライドするタブ切り替えを実装する方法のご紹介でした!

この記事を書いた人

Ryohei

Webエンジニア / ブロガー

福岡のWeb制作会社に務めるWebエンジニアです。エンジニア歴は10年程で、好きな言語はPHPとJavaScriptです。本サイトは私がインプットしたWebに関する知識を整理し、共有することを目的に2015年から運営しています。Webに関するご相談があれば気軽にお問い合わせください。

JavaScriptを基礎からしっかりと学びたい方へ

下記の参考書がおすすめです。私がJavaScript入門時に購入した書籍で、基礎から応用まで多様なサンプルを用いて解説されています。ページ数は多いですが、内容が伴っているのですらすら読めます。腰を据えて学びたい方に最良の一冊となっています。