スワイパー（swiper.js）の上下にタブを設置したい

Question

前提・実現したいこと

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テキスト１
</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の不足のせいか分かりませんが、以上が現状です。

２つ以上の切り替えボタンを連動して動作（できれば、
２つ目（下）はタブの種類を変えたり、swiper-scrollbarにしたい）
させるのにはどうすればよいのでしょうか？

よろしくお願いします。

参照サイト
https://into-the-program.com/swiper-tab/
https://125naroom.com/web/2854

Answer 1

こんばんは。

CSS変更しすぎてどこを変えたのかわからなくなったので、詳しくはサンプル見てもらっていいですか？

サンプル

js は以下の通りです。

var tab = new Swiper('.tab-content', {
    //タブコンテンツ
    slidesPerView: 1,
    autoHeight: true,
    uniqueNavElements: false,
    pagination: {
        el: '.tab-menu',
        clickable: true,
        renderBullet: function (index, className) {
            return '<span class="' + className + '">content' + (index + 1) + '</span>';
        }

    },

});

Comments

[userHoog]

すごいです。
ありがとうございます。

ここまで仕上げてもらっておこがましいのですが、現在

return '<span class="' + className + '">content' + (index + 1) + '</span>';

でタブメニューをcontentと固定され番号が増えていくようになっていますが、これを任意で好きな文言に変えられるようにしたいです。（例えば「写真」「動画」「GIF」「その他」のような感じです）
出来れば、html、次点でcssかjsで変えられるのが望ましいです。

その場合はどのようにすればよいでしょうか？

[Lhankor_Mhy]

https://jsfiddle.net/Lhankor_Mhy/om2g6jcz/2/

こんな感じでしょうか。
もし、上下の見出しで変える、ということでしたら、CSSのcontentでひとつづつ書いていくしかないかもしれません。

[userHoog]

イメージ通りです、わざわざ修正までしていただき感謝しかありません。

ありがとうございました。

[userHoog]

すみません、もう一つだけお聞きしたい点があります。
もはや自分では修正できるレベルにないので、お答えいただけたらと思います。
コメントでは画像が貼れないので質問を新設しました。
どうぞよろしくお願いします。

https://teratail.com/questions/319420?modal=q-comp

Answer 2

こんにちは！私も初心者ですが、参考にならないかもしれませんが…
私も現在進行形で、swiperを用いて、スライダーを実装したのですが、
まず、swiperのオプションを見たほうがいいかなと思います。
あと、元のCSSや、JSは、いじらない、です。
私は、自分で、作ったCSSやJSファイルにオプションを書いて、HTMLで読み込んで、上書きする感じにしました。

私が参考になったサイトは、
こちらや
こちら
です。