Q&A
やりたいこと
①.FlowListBlock内のリストタグ(.tabItem)をクリックしたら、それぞれに対応するスライドショーを表示する
例)４番目のtabItemをクリックしたら、4番目のスライドショーを出力。
→こちらは実装できました。(jsのコードを参照)
②上記の機能にさらに、クリックした.tabItemに色を付ける。(.listSelectedというクラスを作ったのでそれを適用する)
→こちらも強引ですが実装できました。
③スライドショーの方をスワイプしても、.tabItemの色が変わる。
②のクリックイベントだけでなく、単純にスライドショーを左右に動かしても該当する.tabItemの色を変えたいと思います。
→**こちらが相談したい内容です。**swiperには表示しているスライドショーに.swiper-slide-activeというクラスがつくようなのでそれを生かすと良いのかなと思いました。が丸一日時間をかけましたが解決には至らず皆さんのお力添えをいただければと思います。
HTML
1 <!-- 入学までの流れ --> 2 <section class="secFlow secScrollPoint" id="line-Flow"> 3 <div class="commonInner"> 4 5 <div class="FlowWrapper"> 6 <!-- セクションタイトル --> 7 <div class="commonTitleBlock"> 8 <h2 class="secCommonTitle">入学までの流れ</h2> 9 <p class="secCommonEnTitle">Flow</p> 10 </div> 11 12 <!-- 入学フローの５つのリスト --> 13 <div class="FlowListBlock"> 14 <p>てきすと</p> 15 <ul class="tab" id="tab" role="tablist"> 16 <li class="tabItem listSelected" id="tab-1"> 17 <span>1</span> 18 <p>お申込み</p> 19 </li> 20 21 <li class="tabItem" id="tab-2"> 22 <span>2</span> 23 <p>入学試験</p> 24 </li> 25 26 <li class="tabItem" id="tab-3"> 27 <span>3</span> 28 <p>合否のご連絡</p> 29 </li> 30 31 <li class="tabItem" id="tab-4"> 32 <span>4</span> 33 <p>お支払い</p> 34 </li> 35 36 <li class="tabItem" id="tab-5"> 37 <span>5</span> 38 <p>ご入学</p> 39 </li> 40 </ul> 41 </div> 42 </div> 43 44 <!-- 入学フローのスライドショー --> 45 <div class="swiper-wrap"> 46 47 <div class="swiper swiperFlow"> 48 <div class="swiper-wrapper"> 49 <div class="swiper-slide"> 50 <div class="slideNumber"> 51 <p>STEP</p> 52 <p>1</p> 53 </div> 54 55 <div> 56 <p class="slideTitle">お申込み</p> 57 <p class="slideText">Webページよりお申込みください</p> 58 </div> 59 <a href="<?php echo home_url('/contact'); ?>">お申込み</a> 60 </div> 61 62 <div class="swiper-slide"> 63 <div class="slideNumber"> 64 <p>STEP</p> 65 <p>2</p> 66 </div> 67 68 <div> 69 <p class="slideTitle">お申込み</p> 70 <p class="slideText">Webページよりお申込みください</p> 71 </div> 72 <a href="<?php echo home_url('/contact'); ?>">お申込み</a> 73 </div> 74 75 <div class="swiper-slide"> 76 <div class="slideNumber"> 77 <p>STEP</p> 78 <p>3</p> 79 </div> 80 81 <div> 82 <p class="slideTitle">お申込み</p> 83 <p class="slideText">Webページよりお申込みください</p> 84 </div> 85 <a href="<?php echo home_url('/contact'); ?>">お申込み</a> 86 </div> 87 88 <div class="swiper-slide"> 89 <div class="slideNumber"> 90 <p>STEP</p> 91 <p>4</p> 92 </div> 93 94 <div> 95 <p class="slideTitle">お申込み</p> 96 <p class="slideText">Webページよりお申込みください</p> 97 </div> 98 <a href="<?php echo home_url('/contact'); ?>">お申込み</a> 99 </div> 100 101 <div class="swiper-slide"> 102 <div class="slideNumber"> 103 <p>STEP</p> 104 <p>5</p> 105 </div> 106 107 <div> 108 <p class="slideTitle">お申込み</p> 109 <p class="slideText">Webページよりお申込みください</p> 110 </div> 111 <a href="<?php echo home_url('/contact'); ?>">お申込み</a> 112 </div> 113 </div> 114 </div> 115 116 <div class="swiper-button-prev"></div> 117 <div class="swiper-button-next"></div> 118 119 </div> 120 121 </div> 122 </section> 123 124コード
js
1// スライドショーの初期化と振る舞いの定義 2const swiperflow = new Swiper('.swiperFlow', { 3 loop: true, 4 pagination: { 5 el: '.swiper-pagination', 6 }, 7 navigation: { 8 nextEl: '.swiper-button-next', 9 prevEl: '.swiper-button-prev', 10 }, 11 12}); 13 14 15// クリックしたら.tabItemの色を変更し、スライドショーも対応する場所に飛ばす 16$(function(){ 17 18 $('#tab-1').on("click",function(){ 19 swiperflow.slideTo(1);//指定のスライドを呼び出し 20 $('#tab-1').addClass("listSelected"); 21 $('#tab-2,#tab-3,#tab-4,#tab-5').removeClass("listSelected"); 22 }); 23 24 $('#tab-2').on("click",function(){ 25 swiperflow.slideTo(2); 26 $('#tab-2').addClass("listSelected"); 27 $('#tab-1,#tab-3,#tab-4,#tab-5').removeClass("listSelected"); 28 29 }); 30 31 $('#tab-3').on("click",function(){ 32 swiperflow.slideTo(3); 33 $('#tab-3').addClass("listSelected"); 34 $('#tab-1,#tab-2,#tab-4,#tab-5').removeClass("listSelected"); 35 }); 36 37 $('#tab-4').on("click",function(){ 38 swiperflow.slideTo(4); 39 $('#tab-4').addClass("listSelected"); 40 $('#tab-1,#tab-2,#tab-3,#tab-5').removeClass("listSelected"); 41 }); 42 43 $('#tab-5').on("click",function(){ 44 swiperflow.slideTo(5); 45 $('#tab-5').addClass("listSelected"); 46 $('#tab-1,#tab-2,#tab-3,#tab-4').removeClass("listSelected"); 47 }); 48 49}); 50 51 52コード
Sass
1// 入学までの流れセクション 2.secFlow 3 background-color:#575757 4 .commonInner 5 display: flex 6 align-items: flex-end 7 .FlowWrapper 8 // セクションタイトル 9 .commonTitleBlock 10 .secCommonTitle 11 color: #fff 12 .secCommonEnTitle 13 color: #383535 14 15 .FlowListBlock 16 margin-left: 32px 17 >p 18 color: #fff 19 margin-bottom: 48px 20 .tab 21 .tabItem 22 position: relative 23 width: 300px 24 height: 56px 25 display: flex 26 align-items: center 27 justify-content: center 28 background-color: $accent-color 29 color: #fff 30 margin-bottom: 8px 31 cursor: pointer 32 &:last-of-type 33 margin-bottom: 0 34 &.listSelected 35 background-color: #fff 36 color: #333131 37 span 38 position: absolute 39 left: 48px 40 41 p 42 position: absolute 43 left: 88px 44 45 .swiper-wrap 46 position: relative 47 margin-left: 148px 48 .swiper 49 width: 400px 50 height: 600px 51 background-color: #fff 52 .swiper-wrapper 53 .swiper-slide 54 display: flex 55 flex-flow: column 56 justify-content: space-between 57 padding: 80px 42px 80px 58 59 .slideNumber 60 p:nth-of-type(1) 61 font-size: 1rem 62 p:nth-of-type(2) 63 font-size: 8.8rem 64 line-height: 1 65 66 div 67 text-align: center 68 .slideTitle 69 font-size: 1.8rem 70 margin-bottom: 40px 71 font-weight: 500 72 .slideText 73 font-size: 1.4rem 74 75 a 76 display: flex 77 align-items: center 78 justify-content: center 79 width: 300px 80 height: 56px 81 margin: 0 auto 82 background-color: $accent-color 83 color: #fff 84 85 86 87 /* 前ページ、次ページボタン共通のスタイル */ 88 .swiper-button-prev, 89 .swiper-button-next 90 width: 28px 91 height: 28px 92 background-size: 28px 28px 93 margin-top: -14px 94 &::after 95 display: none 96 97 .swiper-button-prev 98 position: absolute 99 left: -80px 100 .swiper-button-next 101 position: absolute 102 right: -80px 103 104 /* 前ページボタンのスタイル */ 105 .swiper-button-prev 106 background-image: url("../img/svg/swiper-button-prev.svg") 107 108 /* 次ページボタンのスタイル */ 109 .swiper-button-next 110 background-image: url("../img/svg/swiper-button-next.svg") 111 112 113// 入学までの流れセクション 114コード
回答1件
0
ベストアンサー
Swiper APIのslideChangeイベントあたりを使えばスライドが操作されたタイミングは検知できるので、
あとはactiveIndexを取得して、対応するインデックスのタブに対して色を付けるようにすればいいと思います。
https://swiperjs.com/swiper-api#event-slideChange
https://swiperjs.com/swiper-api#prop-swiper-activeIndex
js
1swiperflow.on("slideChange", swiper => { 2 alert(swiper.activeIndex); 3});
投稿2021/11/08 06:23
総合スコア497
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2021/11/09 08:43
2021/11/09 08:58