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