Swiperで別タブで複数スライダーを設置したのですが、
2つ目のタブのスライダ3のみカーソルが動きません。
ページネーションも表示されません。
下記を参考にしています。
https://garigaricode.com/swiper/
html
1<div class="tabs"> 2 <input id="sansei" type="radio" name="tab_item" checked > 3 <label class="tab_item" for="sansei">テキスト</label> 4 <input id="alkali" type="radio" name="tab_item"> 5 <label class="tab_item tab_item02" for="alkali">テキスト</label> 6 <div class="tab_content scroll-fade-row" id="sansei_content"> 7 <div class="tab_content_description"> 8 9 <div class="swiper-container sp swiper1"> 10 <div class="swiper-wrapper"> 11 <div class="swiper-slide"><img src="img/01.jpg" width="100%" alt=""> <span>テキスト</span></div> 12 <div class="swiper-slide"><img src="img/02.jpg" width="100%" alt=""> <span>テキスト</span></div> 13 <div class="swiper-slide"><img src="img/03.jpg" width="100%" alt=""> <span>テキスト</span></div> 14 </div> 15 <!-- Add Pagination --> 16 <div class="swiper-pagination swiper-pagination1"></div> 17 <!-- Add navigation --> 18 <div class="swiper-button-prev swiper-button-prev1"></div> 19 <div class="swiper-button-next swiper-button-next1"></div> 20 </div> 21 <div class="sub_box"> 22 <div class="body_box"> 23 <p class="basic_text mb30">テキスト</p> 24 <div class="l-col3 pc"> 25 <div class="item"><img src="img/04.jpg" alt=""></div> 26 <div class="item"><img src="img/05.jpg" alt=""></div> 27 <div class="item"><img src="img/06.jpg" alt=""></div> 28 </div> 29 30 <!-- スライダー2 --> 31 <div class="swiper-container sp swiper2"> 32 <div class="swiper-wrapper"> 33 <div class="swiper-slide"><img src="img/04.jpg" width="100%" alt=""></div> 34 <div class="swiper-slide"><img src="img/05.jpg" width="100%" alt=""></div> 35 <div class="swiper-slide"><img src="img/06.jpg" width="100%" alt=""></div> 36 </div> 37 <!-- Add Pagination --> 38 <div class="swiper-pagination swiper-pagination2"></div> 39 <!-- Add navigation --> 40 <div class="swiper-button-prev swiper-button-prev2"></div> 41 <div class="swiper-button-next swiper-button-next2"></div> 42 </div> 43 </div> 44 </div> 45 </div> 46 </div> 47 <div class="tab_content" id="alkali_content"> 48 <div class="tab_content_description scroll-fade-row"> 49 50 <div class="sub_box sub_box02"> 51 <div class="body_box"> 52 <!-- スライダー3 --> 53 <div class="swiper-container sp swiper3"> 54 <div class="swiper-wrapper"> 55 <div class="swiper-slide"><img src="img/07.jpg" width="100%" alt=""></div> 56 <div class="swiper-slide"><img src="img/08.jpg" width="100%" alt=""></div> 57 <div class="swiper-slide"><img src="img/09.jpg" width="100%" alt=""></div> 58 </div> 59 <!-- Add Pagination --> 60 <div class="swiper-pagination swiper-pagination3"></div> 61 <!-- Add navigation --> 62 <div class="swiper-button-prev swiper-button-prev3"></div> 63 <div class="swiper-button-next swiper-button-next3"></div> 64 </div> 65 66 </div> 67 </div> 68 </div> 69 </div> 70 </div>
javascript
1 2<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/js/swiper.min.js"></script> 3<script> 4 5 6$(function(){ 7 var swiper = new Swiper('.swiper1', { 8 pagination: '.swiper-pagination1', 9 paginationClickable: true, 10 nextButton: '.swiper-button-next1', 11 prevButton: '.swiper-button-prev1', 12 clickable: true 13 }); 14}); 15 16$(function(){ 17 var swiper = new Swiper('.swiper2', { 18 pagination: '.swiper-pagination2', 19 paginationClickable: true, 20 nextButton: '.swiper-button-next2', 21 prevButton: '.swiper-button-prev2', 22 clickable: true 23 }); 24}); 25 26$(function(){ 27 var swiper = new Swiper('.swiper3', { 28 pagination: '.swiper-pagination3', 29 paginationClickable: true, 30 nextButton: '.swiper-button-next3', 31 prevButton: '.swiper-button-prev3', 32 clickable: true 33 }); 34}); 35 36</script>
css
1/*タブ切り替え全体のスタイル*/ 2.tabs { 3 margin: 40px auto; 4} 5/*タブのスタイル*/ 6.tab_item { 7 height: 45px; 8 background-color: #fff; 9 line-height: 45px; 10 font-size: 19px; 11 text-align: center; 12 color: #ff98a8; 13 display: block; 14 float: left; 15 font-size:15px; 16 text-align: center; 17 font-weight: bold; 18 margin: 0 2% 0 0; 19 position:relative;width: 49%; 20 transition: all 0.2s ease;cursor: pointer; 21 cursor: hand; 22} 23.tab_item02 { 24 margin: 0; 25 color: #7dd3ff; 26} 27.tab_item:hover { 28 opacity: 0.75; 29} 30 31/*ラジオボタンを全て消す*/ 32input[name="tab_item"] { 33 display: none; 34} 35/*タブ切り替えの中身のスタイル*/ 36.tab_content { 37 display: none; 38 padding: 30px 0 55px 0; 39 clear: both; 40 overflow: hidden; 41 background-color: #fff; 42} 43/*選択されているタブのコンテンツのみを表示*/ 44#all:checked ~ #all_content, #sansei:checked ~ #sansei_content, #alkali:checked ~ #alkali_content { 45 display: block; 46} 47/*選択されているタブのスタイルを変える*/ 48.tabs input#sansei:checked + .tab_item { 49 background: #ff98a8; 50 color: #fff; 51} 52.tabs input#alkali:checked + .tab_item { 53 background-color: #7dd3ff; 54 color: #fff; 55} 56.tabs input + .tab_item span.arrow { 57 display:none; 58} 59.tabs input:checked + .tab_item span.arrow { 60 position: absolute; 61 top: 27px; 62 left: 44%; 63 z-index:10; 64 display:block; 65}
あなたの回答
tips
プレビュー