#tips #slider

Tab PanelでSwiperを扱う備忘録 全TabにSwiperを配置 Tab Panelにスライダーを配置して欲しいと依頼があったのですが、少しつまづいたので備忘録として記しておきます。 デモはこちらです。Tab Panel内で全TabにSwiperを配置する方法 構築環境 Bootstrap / 4.5.0Swiper / 4.5.0 多少のバージョン違いは同じ方法で解決できると思います。 設置方法 HTMLを書く一例としてBootstrapに組み込みます。 &lt;div class="container"&gt; &lt;div class="row mb-3"&gt; &lt;div class="col"&gt; &lt;!--タブの部分--&gt; &lt;ul class="nav nav-tabs nav-fill"&gt; &lt;li class="nav-item p-1"&gt; &lt;a href="#tab1" class="nav-link text-white active" data-toggle="tab"&gt;Tab-1&lt;/a&gt; &lt;/li&gt; &lt;li class="nav-item p-1"&gt; &lt;a href="#tab2" class="nav-link text-white" data-toggle="tab"&gt;Tab-2&lt;/a&gt; &lt;/li&gt; &lt;li class="nav-item p-1"&gt; &lt;a href="#tab3" class="nav-link text-white" data-toggle="tab"&gt;Tab-3&lt;/a&gt; &lt;/li&gt; &lt;li class="nav-item p-1"&gt; &lt;a href="#tab4" class="nav-link text-white" data-toggle="tab"&gt;Tab-4&lt;/a&gt; &lt;/li&gt; &lt;/ul&gt; &lt;!--タブのコンテンツ部分--&gt; &lt;div class="tab-content"&gt; &lt;div id="tab1" class="tab-pane fade show active"&gt; &lt;div class="swiper-container loading"&gt; &lt;div class="swiper-wrapper"&gt; &lt;div class="swiper-slide"&gt; &lt;img src="https://via.placeholder.com/300/cce2f8/ffffff"&gt; &lt;/div&gt; &lt;div class="swiper-slide"&gt; &lt;img src="https://via.placeholder.com/300/cce2f8/ffffff"&gt; &lt;/div&gt; &lt;div class="swiper-slide"&gt; &lt;img src="https://via.placeholder.com/300/cce2f8/ffffff"&gt; &lt;/div&gt; &lt;div class="swiper-slide"&gt; &lt;img src="https://via.placeholder.com/300/cce2f8/ffffff"&gt; &lt;/div&gt; &lt;div class="swiper-slide"&gt; &lt;img src="https://via.placeholder.com/300/cce2f8/ffffff"&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="swiper-pagination swiper-pagination-black"&gt;&lt;/div&gt; &lt;div class="swiper-button-prev swiper-button-white"&gt;&lt;/div&gt; &lt;div class="swiper-button-next swiper-button-white"&gt;&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;div id="tab2" class="tab-pane fade"&gt; &lt;div class="swiper-container tab-slider loading"&gt; &lt;div class="swiper-wrapper"&gt; &lt;div class="swiper-slide"&gt; &lt;img src="https://via.placeholder.com/300/f8cccc/ffffff"&gt; &lt;/div&gt; &lt;div class="swiper-slide"&gt; &lt;img src="https://via.placeholder.com/300/f8cccc/ffffff"&gt; &lt;/div&gt; &lt;div class="swiper-slide"&gt; &lt;img src="https://via.placeholder.com/300/f8cccc/ffffff"&gt; &lt;/div&gt; &lt;div class="swiper-slide"&gt; &lt;img src="https://via.placeholder.com/300/f8cccc/ffffff"&gt; &lt;/div&gt; &lt;div class="swiper-slide"&gt; &lt;img src="https://via.placeholder.com/300/f8cccc/ffffff"&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="swiper-pagination swiper-pagination-black"&gt;&lt;/div&gt; &lt;div class="swiper-button-prev swiper-button-white"&gt;&lt;/div&gt; &lt;div class="swiper-button-next swiper-button-white"&gt;&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;div id="tab3" class="tab-pane fade"&gt; &lt;div class="swiper-container tab-slider loading"&gt; &lt;div class="swiper-wrapper"&gt; &lt;div class="swiper-slide"&gt; &lt;img src="https://via.placeholder.com/300/f8e2cc/ffffff"&gt; &lt;/div&gt; &lt;div class="swiper-slide"&gt; &lt;img src="https://via.placeholder.com/300/f8e2cc/ffffff"&gt; &lt;/div&gt; &lt;div class="swiper-slide"&gt; &lt;img src="https://via.placeholder.com/300/f8e2cc/ffffff"&gt; &lt;/div&gt; &lt;div class="swiper-slide"&gt; &lt;img src="https://via.placeholder.com/300/f8e2cc/ffffff"&gt; &lt;/div&gt; &lt;div class="swiper-slide"&gt; &lt;img src="https://via.placeholder.com/300/f8e2cc/ffffff"&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="swiper-pagination swiper-pagination-black"&gt;&lt;/div&gt; &lt;div class="swiper-button-prev swiper-button-white"&gt;&lt;/div&gt; &lt;div class="swiper-button-next swiper-button-white"&gt;&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;div id="tab4" class="tab-pane fade"&gt; &lt;div class="swiper-container tab-slider loading"&gt; &lt;div class="swiper-wrapper"&gt; &lt;div class="swiper-slide"&gt; &lt;img src="https://via.placeholder.com/300/e95c5c/ffffff"&gt; &lt;/div&gt; &lt;div class="swiper-slide"&gt; &lt;img src="https://via.placeholder.com/300/e95c5c/ffffff"&gt; &lt;/div&gt; &lt;div class="swiper-slide"&gt; &lt;img src="https://via.placeholder.com/300/e95c5c/ffffff"&gt; &lt;/div&gt; &lt;div class="swiper-slide"&gt; &lt;img src="https://via.placeholder.com/300/e95c5c/ffffff"&gt; &lt;/div&gt; &lt;div class="swiper-slide"&gt; &lt;img src="https://via.placeholder.com/300/e95c5c/ffffff"&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="swiper-pagination swiper-pagination-black"&gt;&lt;/div&gt; &lt;div class="swiper-button-prev swiper-button-white"&gt;&lt;/div&gt; &lt;div class="swiper-button-next swiper-button-white"&gt;&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; CSS(SCSS)でスタイリング .nav-tabs { .nav-link { border-radius: unset; background-color: #9dc7f1 !important; &amp;.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の構築案件でこの記事がご参考になれば幸いです。 参考

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