んタブ切り替え スワイプ swiper.js

Question

https://news.livedoor.com/lite/
こちらのスマホサイトのように１タブ内に２つずつ記事一覧があり、
タブと記事一覧が連動するようにSwiper.jsを使い実装したいのですが
わかるかたいらっしゃいますでしょうか。

                   <div class="topics-block topics-block-tab topics-block-top" tab="1">
            　　　　--<div class="topics-tab-wrap">
                ----<ul id="topics-block-tab-1" class="topics-tab topics-tab-index">
                ------<li class="topics-tab-1 topics-tab-selected">
                    -------<div class="topics-tab-inner">
                    --------<div class="topics-tab-label">主要</div>
                    --------<ul class="topics-block-page">
                        ---------<li><span class="topics-block-pointer topics-block-current"></span></li>
                        ---------<li><span class="topics-block-pointer"></span></li>
                    --------</ul>
                    ------</div>
                ------</li>
              
            ----</ul>
        --</div>

        <div id="topics-block-swipe-1" class="swiper-container topics-block-item">
            --<div class="swiper-wrapper">
                ----<div class="swiper-slide">
                ------<div class="content-slide">
                    --------<ul class="article-list" page="1" category="main" data-category="主要">
                    ----------<li class="article-list-headline">
                        ------------<a href="＃">
                        --------------<div class="article-list-headline-inner">
                            ----------------<div class="article-list-headline-image">
                                ------------------<img src="img/news-img_1.png" alt="">
                            ---------------</div>
                            ---------------<p class="article-list-headline-title"></p>
                        --------------</div>
                        ------------</a>
                    ----------</li>
                    ----------<li>
                        ------------<a href="＃">
                            --------------<p class="article-title">
                                ----------------<span class="meta-new">New</span> 
                            --------------</p>
                        ------------</a>
                    ----------</li>
                      ----------<li>
                        ------------<a href="＃">
                            --------------<p class="article-title">
                                ----------------<span class="meta-new">New</span> 
                            --------------</p>
                        ------------</a>
                    ----------</li>
                    ----------<li>
                        ------------<a href="＃">
                            --------------<p class="article-title">
                                ----------------<span class="meta-new">New</span> 
                            --------------</p>
                        ------------</a>
                    ----------</li>
                     ----------<li>
                        ------------<a href="＃">
                            --------------<p class="article-title">
                                ----------------<span class="meta-new">New</span> 
                            --------------</p>
                        ------------</a>
                    ----------</li>
                   ----------<li>
                        ------------<a href="＃">
                            --------------<p class="article-title">
                                ----------------<span class="meta-new">New</span> 
                            --------------</p>
                        ------------</a>
                    ----------</li>
                   ----------<li>
                        ------------<a href="＃">
                            --------------<p class="article-title">
                                ----------------<span class="meta-new">New</span> 
                            --------------</p>
                        ------------</a>
                    ----------</li>

                    --------</ul>
                ------</div>
                ----</div>

--<div class="swiper-wrapper">
----<div class="swiper-slide">
------<div class="content-slide">
--------<ul class="article-list" page="2" category="main" data-category="主要">
----------<li class="article-list-headline">
------------<a href="＃">
--------------<div class="article-list-headline-inner">
----------------<div class="article-list-headline-image">
------------------<img src="img/news-img_1.png" alt="">
---------------</div>
---------------<p class="article-list-headline-title"></p>
--------------</div>
------------</a>
----------</li>
----------<li>
------------<a href="＃">
--------------<p class="article-title">
----------------<span class="meta-new">New</span>
--------------</p>
------------</a>
----------</li>
----------<li>
------------<a href="＃">
--------------<p class="article-title">
----------------<span class="meta-new">New</span>
--------------</p>
------------</a>
----------</li>
----------<li>
------------<a href="＃">
--------------<p class="article-title">
----------------<span class="meta-new">New</span>
--------------</p>
------------</a>
----------</li>
----------<li>
------------<a href="＃">
--------------<p class="article-title">
----------------<span class="meta-new">New</span>
--------------</p>
------------</a>
----------</li>
----------<li>
------------<a href="＃">
--------------<p class="article-title">
----------------<span class="meta-new">New</span>
--------------</p>
------------</a>
----------</li>
----------<li>
------------<a href="＃">
--------------<p class="article-title">
----------------<span class="meta-new">New</span>
--------------</p>
------------</a>
----------</li>

                    --------</ul>
                ------</div>
                ----</div>

        </div>
        </div>

htmlは現在このようになっています。
文字制限城タブが一つですが、実際は参考サイトのように５つタブがあります。

Comments

[taiyakix]

コードはmarkdownで書いてください。