CSSにて作成したタブ切り替えエリア部分に複数設置したSwiperが動かない。

やりたいこと

下記参考サイトを元にTABで切り替えを行い、
そこにSwiperを用いたスライダーを設置したいと思っています。

上記を参考に下記のような記述を行いましたが、1枚目のパネルのSwiperは作動しますが、
2枚目、3枚目はうまく作動しませんでした。

【html】
		<div class="tabs">
			<input id="all" type="radio" name="tab_item" checked>
				<label class="tab_item" for="first">TAB1</label>
			<input id="programming" type="radio" name="tab_item">
				<label class="tab_item" for="second">TAB2</label>
			<input id="design" type="radio" name="tab_item">
				<label class="tab_item" for="third">TAB3</label>


			<div class="tab_content" id="first_content">
					<div class="swiper-container slider1">
						<div class="swiper-wrapper">
							<div class="swiper-slide">①１つ目の内容</div>
							<div class="swiper-slide">①２つ目の内容</div>
							<div class="swiper-slide">①３つ目の内容</div>
						</div>
					</div>
			</div>
			<div class="tab_content" id="second_content">
					<div class="swiper-container slider2">
						<div class="swiper-wrapper">
							<div class="swiper-slide">②１つ目の内容</div>
							<div class="swiper-slide">②２つ目の内容</div>
							<div class="swiper-slide">③３つ目の内容</div>
						</div>
					</div>
			</div>
			<div class="tab_content" id="third_content">
					<div class="swiper-container slider3">
						<div class="swiper-wrapper">
							<div class="swiper-slide">③１つ目の内容</div>
							<div class="swiper-slide">③２つ目の内容</div>
							<div class="swiper-slide">③３つ目の内容</div>
						</div>
					</div>
			</div>
		</div>

【JavaScript(Swiper設定)】
<script>
var slider1 = new Swiper ('.slider1', {
	effect: 'slide',
	slidesPerView: 1.5,
	spaceBetween:10,
	centeredSlides : true,
	autoplay: {
		delay: 2000,
	},
	loop: true,
	pagination: {
		el: '.swiper-pagination',
	},
	navigation: {
		nextEl: '.swiper-button-next',
		prevEl: '.swiper-button-prev',
	},
	scrollbar: {
		el: '.swiper-scrollbar',
	},
});
var slider2 = new Swiper ('.slider2', {
	effect: 'slide',
	slidesPerView: 1.5,
	spaceBetween:10,
	centeredSlides : true,
	autoplay: {
		delay: 2000,
	},
	loop: true,
	pagination: {
		el: '.swiper-pagination',
	},
	navigation: {
		nextEl: '.swiper-button-next',
		prevEl: '.swiper-button-prev',
	},
	scrollbar: {
		el: '.swiper-scrollbar',
	},
});
var slider3 = new Swiper ('.slider3', {
	effect: 'slide',
	slidesPerView: 1.5,
	spaceBetween:10,
	centeredSlides : true,
	autoplay: {
		delay: 2000,
	},
	loop: true,
	pagination: {
		el: '.swiper-pagination',
	},
	navigation: {
		nextEl: '.swiper-button-next',
		prevEl: '.swiper-button-prev',
	},
	scrollbar: {
		el: '.swiper-scrollbar',
	},
});
</script>

別途試したこと①

また、3つのパネル内のSwiperの挙動は同じでも問題ないので、
別途、htmlにて各パネル内のClassに付随されているslider1～slider3を削除し、
Swiperの設定を統一した記述も試してみました。

<script>
var slider1 = new Swiper ('.swiper-container', {
	effect: 'slide',
	slidesPerView: 1.5,
	spaceBetween:10,
	centeredSlides : true,
	autoplay: {
		delay: 2000,
	},
	loop: true,
	pagination: {
		el: '.swiper-pagination',
	},
	navigation: {
		nextEl: '.swiper-button-next',
		prevEl: '.swiper-button-prev',
	},
	scrollbar: {
		el: '.swiper-scrollbar',
	},
});
</script>

只、どちらの方法を行っても、
1枚目のパネル内のSwiperは動きますが、2枚目・3枚目は動かない状態です。

別途試したこと②

TAB切り替えを行わず、単純に3つSwiperを設置した場合は、
動きましたので、TAB関連のものと何かがぶつかっているかと思い

【html】
		<div class="tabs">
			<input id="all" type="radio" name="tab_item" checked>
				<label class="tab_item" for="first">TAB1</label>
			<input id="programming" type="radio" name="tab_item">
				<label class="tab_item" for="second">TAB2</label>
			<input id="design" type="radio" name="tab_item">
				<label class="tab_item" for="third">TAB3</label>


			<div class="swiper-container tab_content" id="first_content">
						<div class="swiper-wrapper">
							<div class="swiper-slide">①１つ目の内容</div>
							<div class="swiper-slide">①２つ目の内容</div>
							<div class="swiper-slide">①３つ目の内容</div>
						</div>
			</div>
			<div class="swiper-container tab_content" id="second_content">
						<div class="swiper-wrapper">
							<div class="swiper-slide">②１つ目の内容</div>
							<div class="swiper-slide">②２つ目の内容</div>
							<div class="swiper-slide">②３つ目の内容</div>
						</div>
			</div>
			<div class="swiper-container tab_content" id="third_content">
						<div class="swiper-wrapper">
							<div class="swiper-slide">③１つ目の内容</div>
							<div class="swiper-slide">③２つ目の内容</div>
							<div class="swiper-slide">③３つ目の内容</div>
						</div>
			</div>
		</div>

上記のようtab_contentとswiper-containerを統一させてみましたが、
変わらず1枚目のパネル内のSwiperは動き、2枚目・3枚目は動かない状態でした。

思いつく限りの方法は試してみましたが、原因や解決策がわからずの為、
恐れ入りますがお知恵お借りできれば幸いです。

よろしくお願い致します。

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

回答1件

ベストアンサー

最初に開いているTAB以外が動作しないのは「var slider2 = new Swiper」の時点では閉じている要素の実体がなく、スライドさせるのに必要な要素幅など、必要なデータがDOMにないことが原因みたいです

必要なデータが揃ってから（TABを開いた時） new Swiper すればいいんじゃね？
ってことで、やっつけ気味に書いたのが以下です（参考程度に）

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <title>Untitled</title>
5  <!-- Swiper css -->
6  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css">
7  <!-- Swiper js -->
8  <script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>
9  <style>
10    /*
11    【CSS】CSSだけでタブ切り替えを作る方法
12     https://bagelee.com/design/css/create_tabs_using_only_css/
13    */
14    /*タブ切り替え全体のスタイル */
15    .tabs {
16      margin-top: 50px;
17      padding-bottom: 40px;
18      background-color: #fff;
19      box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
20      width: 700px;
21      margin: 0 auto;}
22    
23    /*タブのスタイル*/
24    .tab_item {
25      width: calc(100%/3);
26      height: 50px;
27      border-bottom: 3px solid #5ab4bd;
28      background-color: #d9d9d9;
29      line-height: 50px;
30      font-size: 16px;
31      text-align: center;
32      color: #565656;
33      display: block;
34      float: left;
35      text-align: center;
36      font-weight: bold;
37      transition: all 0.2s ease;
38    }
39    .tab_item:hover {
40      opacity: 0.75;
41    }
42    
43    /*ラジオボタンを全て消す*/
44    input[name="tab_item"] {
45      display: none;
46    }
47    
48    /*タブ切り替えの中身のスタイル*/
49    .tab_content {
50      display: none;
51      padding: 40px 40px 0;
52      clear: both;
53      overflow: hidden;
54    }
55    
56    
57    /*選択されているタブのコンテンツのみを表示*/
58    #all:checked ~ #all_content,
59    #programming:checked ~ #programming_content,
60    #design:checked ~ #design_content {
61      display: block;
62    }
63    
64    /*選択されているタブのスタイルを変える*/
65    .tabs input:checked + .tab_item {
66      background-color: #5ab4bd;
67      color: #fff;
68    }
69  </style>
70</head>
71<body>
72  <!--
73  【CSS】CSSだけでタブ切り替えを作る方法
74   https://bagelee.com/design/css/create_tabs_using_only_css/
75   -->
76  <div class="tabs">
77    <input id="all" type="radio" name="tab_item" checked> <label class="tab_item" for="all">総合</label>
78    <input id="programming" type="radio" name="tab_item"> <label class="tab_item" for="programming">プログラミング</label>
79    <input id="design" type="radio" name="tab_item"> <label class="tab_item" for="design">デザイン</label>
80    <div class="tab_content" id="all_content">
81      <div class="swiper-container slider1">
82        <div class="swiper-wrapper">
83          <div class="swiper-slide">slider1-1</div>
84          <div class="swiper-slide">slider1-2</div>
85          <div class="swiper-slide">slider1-3</div>
86        </div>
87      </div>
88    </div>
89    <div class="tab_content" id="programming_content">
90      <div class="swiper-container slider2">
91        <div class="swiper-wrapper">
92          <div class="swiper-slide">slider2-1</div>
93          <div class="swiper-slide">slider2-2</div>
94          <div class="swiper-slide">slider2-3</div>
95        </div>
96      </div>
97    </div>
98    <div class="tab_content" id="design_content">
99      <div class="swiper-container slider3">
100        <div class="swiper-wrapper">
101          <div class="swiper-slide">slider3-1</div>
102          <div class="swiper-slide">slider3-2</div>
103          <div class="swiper-slide">slider3-3</div>
104        </div>
105      </div>
106    </div>
107  </div>
108  <script>
109    // Swiper https://swiperjs.com/
110    var sliderOptions = { // Swiperオプション（共通）
111    	effect: 'slide',
112    	slidesPerView: 1.5,
113    	spaceBetween:10,
114    	centeredSlides : true,
115    	autoplay: {
116    		delay: 2000,
117    	},
118    	loop: true,
119    	pagination: {
120    		el: '.swiper-pagination',
121    	},
122    	navigation: {
123    		nextEl: '.swiper-button-next',
124    		prevEl: '.swiper-button-prev',
125    	},
126    	scrollbar: {
127    		el: '.swiper-scrollbar',
128    	}
129    };
130    
131    var slider1 = new Swiper ('.slider1', sliderOptions); // 最初に開いているTAB
132    var sliders = [slider1, null, null]; // TAB（input要素）と紐付けするSwiperオブジェクトリスト
133    
134    document.addEventListener('change', function (e) {
135      var target = e.target;
136      if (target.name !== 'tab_item') return false; // name属性で選別
137      var elemList = document.getElementsByName('tab_item'); // 対象要素リスト
138      for (var i = 0; i < elemList.length; i++) {
139        if (target === elemList[i]) { // 開いたTAB番号(i)を見付ける
140          // 紐付けたSwiperオブジェクトがnullなら new Swiper（始動）
141          // でなければ停止中を確認してstart()
142          if (sliders[i] === null) sliders[i] = new Swiper ('.slider' + (i + 1), sliderOptions); // class名: '.slider' + (i + 1)
143          else if (!sliders[i].autoplay.running) sliders[i].autoplay.start();
144        } else if (sliders[i] && sliders[i].autoplay.running) sliders[i].autoplay.stop(); // 開いたTAB以外は停止
145      }
146      return true;
147    });
148  </script>
149</body>
150</html>

投稿2022/10/14 07:54

編集2022/10/15 05:12

CODEMAN

総合スコア56

NNC

2022/10/15 04:24

ご教授ありがとうございます。ご提示頂いた方法では作動はできませんでしたが、＞「var slider2 = new Swiper」の時点では閉じている要素の実体がなく、＞スライドさせるのに必要な要素幅など、必要なデータがDOMにないことこちらが大きなヒントになり、別の方法でTAB切り替えを行った所、やりたかった事が実現できました。ご助言いただき、ありがとうございました。