Tab Panelで全TabにSwiperを配置する方法

Tab PanelでSwiperを扱う備忘録

全TabにSwiperを配置

Tab Panelにスライダーを配置して欲しいと依頼があったのですが、少しつまづいたので備忘録として記しておきます。

デモはこちらです。
Tab Panel内で全TabにSwiperを配置する方法

構築環境

  • Bootstrap / 4.5.0
  • Swiper / 4.5.0

多少のバージョン違いは同じ方法で解決できると思います。

設置方法

HTMLを書く
一例としてBootstrapに組み込みます。

<div class="container">
    <div class="row mb-3">
        <div class="col">
            <!--タブの部分-->
            <ul class="nav nav-tabs nav-fill">
                <li class="nav-item p-1">
                    <a href="#tab1" class="nav-link text-white active" data-toggle="tab">Tab-1</a>
                </li>
                <li class="nav-item p-1">
                    <a href="#tab2" class="nav-link text-white" data-toggle="tab">Tab-2</a>
                </li>
                <li class="nav-item p-1">
                    <a href="#tab3" class="nav-link text-white" data-toggle="tab">Tab-3</a>
                </li>
                <li class="nav-item p-1">
                    <a href="#tab4" class="nav-link text-white" data-toggle="tab">Tab-4</a>
                </li>
            </ul>

            <!--タブのコンテンツ部分-->
            <div class="tab-content">
                <div id="tab1" class="tab-pane fade show active">
                    <div class="swiper-container loading">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide">
                                <img src="https://via.placeholder.com/300/cce2f8/ffffff">
                            </div>
                            <div class="swiper-slide">
                                <img src="https://via.placeholder.com/300/cce2f8/ffffff">
                            </div>
                            <div class="swiper-slide">
                                <img src="https://via.placeholder.com/300/cce2f8/ffffff">
                            </div>
                            <div class="swiper-slide">
                                <img src="https://via.placeholder.com/300/cce2f8/ffffff">
                            </div>
                            <div class="swiper-slide">
                                <img src="https://via.placeholder.com/300/cce2f8/ffffff">
                            </div>
                        </div>
                        <div class="swiper-pagination swiper-pagination-black"></div>
                        <div class="swiper-button-prev swiper-button-white"></div>
                        <div class="swiper-button-next swiper-button-white"></div>
                    </div>
                </div>

                <div id="tab2" class="tab-pane fade">
                    <div class="swiper-container tab-slider loading">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide">
                                <img src="https://via.placeholder.com/300/f8cccc/ffffff">
                            </div>
                            <div class="swiper-slide">
                                <img src="https://via.placeholder.com/300/f8cccc/ffffff">
                            </div>
                            <div class="swiper-slide">
                                <img src="https://via.placeholder.com/300/f8cccc/ffffff">
                            </div>
                            <div class="swiper-slide">
                                <img src="https://via.placeholder.com/300/f8cccc/ffffff">
                            </div>
                            <div class="swiper-slide">
                                <img src="https://via.placeholder.com/300/f8cccc/ffffff">
                            </div>
                        </div>
                        <div class="swiper-pagination swiper-pagination-black"></div>
                        <div class="swiper-button-prev swiper-button-white"></div>
                        <div class="swiper-button-next swiper-button-white"></div>
                    </div>
                </div>

                <div id="tab3" class="tab-pane fade">
                    <div class="swiper-container tab-slider loading">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide">
                                <img src="https://via.placeholder.com/300/f8e2cc/ffffff">
                            </div>
                            <div class="swiper-slide">
                                <img src="https://via.placeholder.com/300/f8e2cc/ffffff">
                            </div>
                            <div class="swiper-slide">
                                <img src="https://via.placeholder.com/300/f8e2cc/ffffff">
                            </div>
                            <div class="swiper-slide">
                                <img src="https://via.placeholder.com/300/f8e2cc/ffffff">
                            </div>
                            <div class="swiper-slide">
                                <img src="https://via.placeholder.com/300/f8e2cc/ffffff">
                            </div>
                        </div>
                        <div class="swiper-pagination swiper-pagination-black"></div>
                        <div class="swiper-button-prev swiper-button-white"></div>
                        <div class="swiper-button-next swiper-button-white"></div>
                    </div>
                </div>

                <div id="tab4" class="tab-pane fade">
                    <div class="swiper-container tab-slider loading">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide">
                                <img src="https://via.placeholder.com/300/e95c5c/ffffff">
                            </div>
                            <div class="swiper-slide">
                                <img src="https://via.placeholder.com/300/e95c5c/ffffff">
                            </div>
                            <div class="swiper-slide">
                                <img src="https://via.placeholder.com/300/e95c5c/ffffff">
                            </div>
                            <div class="swiper-slide">
                                <img src="https://via.placeholder.com/300/e95c5c/ffffff">
                            </div>
                            <div class="swiper-slide">
                                <img src="https://via.placeholder.com/300/e95c5c/ffffff">
                            </div>
                        </div>
                        <div class="swiper-pagination swiper-pagination-black"></div>
                        <div class="swiper-button-prev swiper-button-white"></div>
                        <div class="swiper-button-next swiper-button-white"></div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>

CSS(SCSS)でスタイリング

.nav-tabs {
  .nav-link {
    border-radius: unset;
    background-color: #9dc7f1 !important;

    &.active {
      color: #fff !important;
      background-color: #5ca2e9 !important;
    }
  }

  border: none;
  font-size: 1.2vw;
  font-weight: 700;
}

.swiper-container {
  width: 100%;
  padding-bottom: 15px;

  .swiper-slide img {
    max-width: 100%;
    height: auto;
  }
}

Swiperの初期化

var mySwiper = new Swiper('.swiper-container', {
observer: true,
observeParents: true,
  //autoplay: true,
  speed: 200,
  loop: true,
  slidesPerView:5,
  spaceBetween: 15,
  slidesPerGroup: 1,
 pagination: {
        el: '.swiper-pagination',
        clickable: true,
      },
  navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
  breakpoints: {
  960: { 
      slidesPerView: 4,
      spaceBetween: 10,
      slidesPerGroup: 1,
    },
    720: { 
      slidesPerView: 3,
      spaceBetween: 5,
      slidesPerGroup:1,
    }
  }
})

ここで大事なのは、

observer: true,
observeParents: true,

のところ。初期化の瞬間Swiperがトップタブ以外で非表示になっているため、パラメーターを追加する必要があります。そうしないとトップタブ以外ではスライダーがうまく動きません。

まとめ

Swiperはオプションも豊富だしとても使いやすいスライダーなので、現場で出番も多いと思います。同じようなSwiperの構築案件でこの記事がご参考になれば幸いです。

参考

Hello guys, I have one problem happening on a project and I cannot seem to find …
github.com
I'm using bootstrap tab & swiper slider,I have multiples tab, in all ta…
stackoverflow.com