前提・実現したいこと
JavaScriptの超初心者です。
https://into-the-program.com/swiper-tab/
の記事を参考にして、タブで切り替えられるスライドショーをつくってみたのですが、
上の切り替えボタンと連動するボタンを下にもつけたいと思っています。(イメージは添付画像参照)
しかし、知識不足でなかなか思うように機能させることができません。
【参照URL】
https://125naroom.com/web/2854
該当のソースコード
JSはそのまま流用
var tab = new Swiper('.tab-content', { //タブコンテンツ slidesPerView: 1, autoHeight: true, //タブメニュー thumbs: { swiper: { el: '.tab-menu', slidesPerView: 4, } }, });
scssはcssに直しました。(こちらは元から大幅に削りました)
.tab-menu .swiper-wrapper .swiper-slide{ padding: 20px 0; position: relative; text-align:center; color:black; background-color:#dce9f5; cursor:pointer; border-right:2px solid black; font-size:.9em;/*メニュー一覧のフォントの大きさ*/ font-weight:bold; color:black; } .tab-menu .swiper-wrapper .swiper-slide:last-child{ border:0 } .tab-menu .swiper-wrapper .swiper-slide-thumb-active{ color:brack; background-color:#f7f7f7; } .tab-content .swiper-wrapper .swiper-slide{ box-sizing: border-box; display:block; flex-wrap:wrap; justify-content:space-between; background-color:white; padding:0px 5px 5px;/*content内の文字の余白*/ }
そしてhtmlは以下のように記述しました(A)(こちらも元から大幅に削りました)
<!-- タブメニュー --> <div class="swiper-container tab-menu"> <div class="swiper-wrapper"> <div class="swiper-slide">content1</div> <div class="swiper-slide">content2</div> <div class="swiper-slide">content3</div> <div class="swiper-slide">content4</div> </div> </div> <!-- 各スライド --> <div class="swiper-container tab-content"> <div class="swiper-wrapper"> <div class="swiper-slide"> contentテキスト1 </div> <div class="swiper-slide"> contentテキスト2 </div> <div class="swiper-slide"> contentテキスト3 </div> <div class="swiper-slide"> contentテキスト4 </div> </div>
試したこと
単純に上記htmlの最後の</div>直前に、
<div class="swiper-wrapper"> <div class="swiper-slide">content1</div> <div class="swiper-slide">content2</div> <div class="swiper-slide">content3</div> <div class="swiper-slide">content4</div> </div>
をさしこめばいけるのかな、と思ったのですがだめでした。
そもそも、html(A)を複製すると以下の画像のように動作が加わらなくります。
実現したいこと
元の「これいらないかな」と思うコードを大幅に削ったためか、
もしくはjsの不足のせいか分かりませんが、以上が現状です。
2つ以上の切り替えボタンを連動して動作(できれば、
2つ目(下)はタブの種類を変えたり、swiper-scrollbarにしたい)
させるのにはどうすればよいのでしょうか?
よろしくお願いします。
参照サイト
https://into-the-program.com/swiper-tab/
https://125naroom.com/web/2854
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2021/01/29 13:13
2021/01/29 14:42 編集
2021/01/30 02:42
2021/01/30 03:13