swiper.jsを使ってタブ切り替えを実装する方法

まずはhead内にswiper.cssとswiper.jsを読み込む

swiper.jsは

https://swiperjs.com/

からダウンロード

HTML

<div class="wrapper">
  <!--タブメニュー（スライド）-->
  <div class="swiper-container tab-menu">
    <div class="swiper-wrapper">
      <div class="swiper-slide">メニュー１</div>
      <div class="swiper-slide">メニュー2</div>
      <div class="swiper-slide">メニュー3</div>
      <div class="swiper-slide">メニュー4</div>
      <div class="swiper-slide">メニュー5</div>
      <div class="swiper-slide">メニュー6</div>
      <div class="swiper-slide">メニュー7</div>
      <div class="swiper-slide">メニュー8</div>
      <div class="swiper-slide">メニュー9</div>
      <div class="swiper-slide">メニュー10</div>
    </div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
  </div>
　　<!--//タブメニュー（スライド）-->

  <!--タブコンテンツ-->
  <div class="swiper-container tab-content">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
      　　<p>タブコンテンツ1</p>
      </div>
      <div class="swiper-slide">
        <p>タブコンテンツ2</p>
      </div>
      <div class="swiper-slide">
        <p>タブコンテンツ3</p>
      </div>
      <div class="swiper-slide">
        <p>タブコンテンツ4</p>
      </div>
      <div class="swiper-slide">
         <p>タブコンテンツ5</p>
      </div>
      <div class="swiper-slide">
         <p>タブコンテンツ6</p>
      </div>
      <div class="swiper-slide">
         <p>タブコンテンツ7</p>
      </div>
      <div class="swiper-slide">
          <p>タブコンテンツ8</p>
      </div>
      <div class="swiper-slide">
          <p>タブコンテンツ9</p>
      </div>
      <div class="swiper-slide">
         <p>タブコンテンツ10</p>
      </div>
    </div>
  </div>
  <!--//タブコンテンツ-->
</div>

CSS

お好みで

JS

var tab = new Swiper('.tab-content', {
    slidesPerView: 1,
    autoHeight: true,
    thumbs: {
        swiper: {
            el: '.tab-menu',
            slidesPerView: 6,//ここの数値は用途に合わせて変更
        }
    },
    navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
});