タブを切り替えてもSwiperが動くようにしたい

現在CSSのみでタブを切り替えるページを作成しております。
商品を紹介するために複数枚の画像に対してSwiperを使用しました。
しかしSwiperが白色のみ反応し、赤色・青色には無反応です。
このページを開くと白色にcheckが入っているので白色のみ反映されて、非表示から表示へタブを切り替えた色に関しては反応していないようです

</body>直前に記載している<script>を<body>内で位置を変え読み込ませてみましたが変わらずでした。何方かご教授願いたいです。

ざっくりとした内容ですが、
上部に色を選択できるようにタブを作成し、色（タブ）を選ぶと下部に左側：Swiperで商品の画像（５枚程）を、右側：商品スペック（dl dt ddで表記）が表示されるようにflexを使用しページを作成しています。
（各タブの一番下の行（<script>...i1、i2、i3）は消費税を税込表記にするものです。色は最大７色あるページもあります）

<div id="main_wrap">
  <div class="tabs">
    <input id="i1" type="radio" name="item_tab" checked>
    <label class="item_tab" for="i1"><img src="白色サムネ.png" alt=""></label>
    <input id="i2" type="radio" name="item_tab">
    <label class="item_tab" for="i2"><img src="赤色サムネ.png" alt=""></label>
    <input id="i3" type="radio" name="item_tab">
    <label class="item_tab" for="i3"><img src="青色サムネ.png" alt=""></label>

    <div class="item_type" id="i1_content">
      <div class="item_top">
        <div class="item_photo">
          <div class="swiper-container slider">
            <div class="swiper-wrapper">
              <div class="swiper-slide"><img src="白色商品.png" alt=""></div>
              <div class="swiper-slide"><img src="箱など.png" alt=""></div>
            </div>
            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>
          </div><!-- swiper-container slider -->
          <div class="swiper-container thumbs">
            <div class="swiper-wrapper">
              <div class="swiper-slide"><img src="白色商品.png" alt=""></div>
              <div class="swiper-slide"><img src="箱など.png" alt=""></div>
            </div>
          </div><!-- swiper-container -->
        </div><!-- item_photo -->

        <dl id="tax">
          <div class="item_desc">
            <dt>商品名：</dt><dd><h2>〇〇 白</h2></dd>
            <dt>価格：</dt><dd><p><span>1000</span>円（税込<span></span>円）</p></dd>
            <dt>サイズ：</dt><dd>直径 10.0cm × 高さ 8.0cm</dd>
          </div>
         </dl>
       </div><!-- item_top -->
     </div><!-- item_type -->
     <script>[...i1_content.querySelectorAll('dd span')].reduce((a,b,i,_,v='textContent')=>i&1?(b[v]=a.toLocaleString(),0):Math.ceil(+(b[v].replace(/,/g,''))*11/10),0);</script>

     <div class="item_type" id="i2_content">
       <div class="item_top">
         <div class="item_photo">
           <div class="swiper-container slider">
             <div class="swiper-wrapper">
               <div class="swiper-slide"><img src="赤色商品.png" alt=""></div>
               <div class="swiper-slide"><img src="箱など.png" alt=""></div>
             </div>
             <div class="swiper-button-prev"></div>
             <div class="swiper-button-next"></div>
           </div><!-- swiper-container slider -->
           <div class="swiper-container thumbs">
             <div class="swiper-wrapper">
               <div class="swiper-slide"><img src="赤色商品.png" alt=""></div>
               <div class="swiper-slide"><img src="箱など.png" alt=""></div>
             </div>
           </div><!-- swiper-container thumbs　-->
         </div><!-- item_photo -->

         <dl id="tax">
           <div class="item_desc">
             <dt>商品名：</dt><dd><h2>〇〇 赤</h2></dd>
             <dt>価格：</dt><dd><p><span>1000</span>円（税込<span></span>円）</p></dd>
             <dt>サイズ：</dt><dd>直径 10.0cm × 高さ 8.0cm</dd>
           </div>
         </dl>
       </div><!-- item_top -->
     </div><!-- item_type -->
     <script>[...i2_content.querySelectorAll('dd span')].reduce((a,b,i,_,v='textContent')=>i&1?(b[v]=a.toLocaleString(),0):Math.ceil(+(b[v].replace(/,/g,''))*11/10),0);</script>

     <div class="item_type" id="i3_content">
       <div class="item_top">
         <div class="item_photo">
           <div class="swiper-container slider">
             <div class="swiper-wrapper">
               <div class="swiper-slide"><img src="青色商品.png" alt=""></div>
               <div class="swiper-slide"><img src="箱など.png" alt=""></div>
             </div>
             <div class="swiper-button-prev"></div>
             <div class="swiper-button-next"></div>
           </div><!-- swiper-container slider -->
           <div class="swiper-container thumbs">
             <div class="swiper-wrapper">
               <div class="swiper-slide"><img src="青色商品.png" alt=""></div>
               <div class="swiper-slide"><img src="箱など.png" alt=""></div>
             </div>
           </div><!-- swiper-container thumbs　-->
         </div><!-- item_photo -->

         <dl id="tax">
           <div class="item_desc">
             <dt>商品名：</dt><dd><h2>〇〇 青</h2></dd>
             <dt>価格：</dt><dd><p><span>1000</span>円（税込<span></span>円）</p></dd>
             <dt>サイズ：</dt><dd>直径 10.0cm × 高さ 8.0cm</dd>
           </div>
         </dl>
       </div><!-- item_top -->
       </div><!-- item_type -->
       <script>[...i3_content.querySelectorAll('dd span')].reduce((a,b,i,_,v='textContent')=>i&1?(b[v]=a.toLocaleString(),0):Math.ceil(+(b[v].replace(/,/g,''))*11/10),0);</script>
</div>

ラジオボタンにcheckが入るとそこの部分が表示され、その他を非表示にするcssにしています。

 /*ラジオボタンを全て消す*/
  input[name="item_tab"] {
    display: none;
  }

  /*タブ切り替えの中身のスタイル*/
  .item_type {
    display: none;
    clear: both;
    overflow: hidden;
  }

  /*選択されているタブのコンテンツのみを表示*/
  #i1:checked ~ #i1_content,#i2:checked ~ #i2_content,#i3:checked ~ #i3_content,#i4:checked ~ #i4_content,#i5:checked ~ #i5_content,#i6:checked ~ #i6_content,#i7:checked ~ #i7_content{
    display: block;
  }

  /*選択されているタブのスタイルを変える*/
  .tabs input:checked + .item_tab {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  }

Swiperのサイトよりcssとjsをダウンロードし、<head>内にcssを、</body>の直前にjsを読み込ませており、その１行下にSwiperをどのように動かしたいか<script>を書いています。（参考にしたサイトのscriptをそのまま使用しております）

 <script src="../../swiper.js"></script>
 <script>
   var mainSlider = new Swiper('.slider', {
   centeredSlides: true,
   loop:true,
   navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
    }
   });

   //サムネイル
   var Thumbnail = new Swiper('.thumbs', {
   slidesPerView: 5,
   loop:true,
   centeredSlides:true,
   slideToClickedSlide: true,
   });

   mainSlider.on('slideChange', () => {
    Thumbnail.slideToLoop(mainSlider.realIndex);
   });
   Thumbnail.on('slideChange', () => {
    mainSlider.slideToLoop(Thumbnail.realIndex);
   });
 </script>
</body>

行動規範の内容に同意します

回答2件

ベストアンサー

これは試しましたか？

【タブ切り替えでもSwiperを動作させる | BestCodingNote】
https://bestcodingnote.com/tab-swiper/

投稿2021/07/26 12:25

kei344

総合スコア69606

hoshi_sub

2021/07/27 11:42

kei344様こちらのサイトを教えていただきありがとうございました。動作しなかった原因が、cssのみでタブの切り替えを行っており【display:none;】がscriptの邪魔をしていたみたいです。こちらのサイトを参考にタブの切り替えをjavascriptに変更したところ動作しました。本当にありがとうございました。

行動規範の内容に同意します

cssのみでタブの切り替えを行おおうとしていたところ、【display:none;】が原因で２ページ目以降が動作しないことが判明した

タブの切り替えを【cssのみ】から【javascriptを使用する】に変更

教えて頂いたサイトのコードを参考にHTML・CSS・JavaScriptを変更したところ、正常に作動した

HTML

  <div id="main_wrap">
    <div class="tab">
      <div class="tab__item tab__item--active"><img src="白色サムネ.png" alt=""></div>
      <div class="tab__item"><img src="赤色サムネ.png" alt=""></div>
      <div class="tab__item"><img src="青色サムネ.png" alt=""></div>
    </div><!-- tab -->

    <div class="item_top item_top--active">
      <div class="item_wrap">
        <div class="item_photo">
          <div class="swiper-container slider1">
            <div class="swiper-wrapper">
              <div class="swiper-slide"><img src="白色商品.png" alt=""></div>
              <div class="swiper-slide"><img src="箱など.png" alt=""></div>
            </div>
            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>
          </div><!-- swiper-container slider1 -->
          <div class="swiper-container thumbs1">
            <div class="swiper-wrapper">
              <div class="swiper-slide"><img src="白色商品.png" alt=""></div>
              <div class="swiper-slide"><img src="箱など.png" alt=""></div>
            </div>
          </div><!-- swiper-container thumbs1 -->
        </div><!-- item_photo -->
        <div id="tax1">
          <dl class="item_desc">
            <dt>商品名：</dt><dd><h2>〇〇 白</h2></dd>
            <dt>価格：</dt><dd><p><span>1,000</span>円（税込<span></span>円）</p></dd>
            <dt>サイズ：</dt><dd>直径 10.0cm × 高さ 8.0cm</dd>
          </dl>
        </div>
      </div><!-- item_wrap -->
    </div><!-- item_top -->
    <script>[...tax1.querySelectorAll('dd span')].reduce((a,b,i,_,v='textContent')=>i&1?(b[v]=a.toLocaleString(),0):Math.ceil(+(b[v].replace(/,/g,''))*11/10),0);</script>

    <div class="item_top">
      <div class="item_wrap">
        <div class="item_photo">
          <div class="swiper-container slider2">
            <div class="swiper-wrapper">
              <div class="swiper-slide"><img src="赤色商品.png" alt=""></div>
              <div class="swiper-slide"><img src="箱など.png" alt=""></div>
            </div>
            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>
          </div><!-- swiper-container slider1 -->
          <div class="swiper-container thumbs2">
            <div class="swiper-wrapper">
              <div class="swiper-slide"><img src="赤色商品.png" alt=""></div>
              <div class="swiper-slide"><img src="箱など.png" alt=""></div>
            </div>
          </div><!-- swiper-container thumbs1 -->
        </div><!-- item_photo -->
        <div id="tax2">
          <dl class="item_desc">
            <dt>商品名：</dt><dd><h2>〇〇 赤</h2></dd>
            <dt>価格：</dt><dd><p><span>1,000</span>円（税込<span></span>円）</p></dd>
            <dt>サイズ：</dt><dd>直径 10.0cm × 高さ 8.0cm</dd>
          </dl>
        </div>
      </div><!-- item_wrap -->
    </div><!-- item_top -->
    <script>[...tax2.querySelectorAll('dd span')].reduce((a,b,i,_,v='textContent')=>i&1?(b[v]=a.toLocaleString(),0):Math.ceil(+(b[v].replace(/,/g,''))*11/10),0);</script>

    <div class="item_top">
      <div class="item_wrap">
        <div class="item_photo">
          <div class="swiper-container slider3">
            <div class="swiper-wrapper">
              <div class="swiper-slide"><img src="青色商品.png" alt=""></div>
              <div class="swiper-slide"><img src="箱など.png" alt=""></div>
            </div>
            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>
          </div><!-- swiper-container slider1 -->
          <div class="swiper-container thumbs3">
            <div class="swiper-wrapper">
              <div class="swiper-slide"><img src="青色商品.png" alt=""></div>
              <div class="swiper-slide"><img src="箱など.png" alt=""></div>
            </div>
          </div><!-- swiper-container thumbs1 -->
        </div><!-- item_photo -->
        <div id="tax3">
          <dl class="item_desc">
            <dt>商品名：</dt><dd><h2>〇〇 青</h2></dd>
            <dt>価格：</dt><dd><p><span>1,000</span>円（税込<span></span>円）</p></dd>
            <dt>サイズ：</dt><dd>直径 10.0cm × 高さ 8.0cm</dd>
          </dl>
        </div>
      </div><!-- item_wrap -->
    </div><!-- item_top -->
    <script>[...tax3.querySelectorAll('dd span')].reduce((a,b,i,_,v='textContent')=>i&1?(b[v]=a.toLocaleString(),0):Math.ceil(+(b[v].replace(/,/g,''))*11/10),0);</script>

CSS

CSSはレイアウトになるので省略

JavaScript

<script src="../../swiper.js"></script>
  <script>
  var main_slider1 = new Swiper('.slider1', {
    centeredSlides: true,
    loop:true,
    observer: true,
    observeParents: true,
    navigation: {
          nextEl: '.slider1 .swiper-button-next',
          prevEl: '.slider1 .swiper-button-prev',
      },
  });
  var Thumbnail1 = new Swiper('.thumbs1', {
    slidesPerView: 5,
    centeredSlides:true,
    slideToClickedSlide: true,
    observer: true,
    observeParents: true,
  });
  main_slider1.on('slideChange', () => {
    Thumbnail1.slideToLoop(main_slider1.realIndex);
});
  Thumbnail1.on('slideChange', () => {
    main_slider1.slideToLoop(Thumbnail1.realIndex);
});

  var main_slider2 = new Swiper('.item_photo .slider2', {
    centeredSlides: true,
    loop:true,
    observer: true,
    observeParents: true,
    navigation: {
          nextEl: '.slider2 .swiper-button-next',
          prevEl: '.slider2 .swiper-button-prev',
      },
  });
  var Thumbnail2 = new Swiper('.item_photo .thumbs2', {
    slidesPerView: 5,
    centeredSlides:true,
    slideToClickedSlide: true,
    observer: true,
    observeParents: true,
  });
  main_slider2.on('slideChange', () => {
    Thumbnail2.slideToLoop(main_slider2.realIndex);
  });
  Thumbnail2.on('slideChange', () => {
    main_slider2.slideToLoop(Thumbnail2.realIndex);
  });

var main_slider3 = new Swiper('.slider3', {
  centeredSlides: true,
  loop:true,
  observer: true,
  observeParents: true,
  navigation: {
        nextEl: '.slider3 .swiper-button-next',
        prevEl: '.slider3 .swiper-button-prev',
    },
});
var Thumbnail3 = new Swiper('.thumbs3', {
  slidesPerView: 5,
  centeredSlides:true,
  slideToClickedSlide: true,
  observer: true,
  observeParents: true,

});
main_slider3.on('slideChange', () => {
  Thumbnail3.slideToLoop(main_slider3.realIndex);
});
Thumbnail3.on('slideChange', () => {
  main_slider3.slideToLoop(Thumbnail3.realIndex);
});


  // タブ切り替え
  var tab_item = document.querySelectorAll('.tab__item');
  for (let i = 0; i < 3; i++) {
      tab_item[i].addEventListener('click', (e) => {
          document.getElementsByClassName('tab__item--active')[0].classList.remove('tab__item--active');
          tab_item[i].classList.add('tab__item--active');
          document.getElementsByClassName('item_top--active')[0].classList.remove('item_top--active');
          var main_slider = document.querySelectorAll('.item_top');
          main_slider[i].classList.add('item_top--active');
      });
  }
  </script>

以上

投稿2021/07/27 11:57

hoshi_sub

総合スコア4