teratail
回答率
85.35%
teratail header banner
teratail header banner
質問するログイン新規登録
トップに関する質問[Swiper]3つのサムネイル連動について

編集履歴

質問編集履歴

4

誤字

2021/06/23 11:25

投稿

okeke
okeke

スコア8

test CHANGED
File without changes
test CHANGED
@@ -82,7 +82,7 @@
82
82
 
83
83
  thumbs: {
84
84
 
85
- swiper: galleryThumbs,
85
+ swiper: nameB,
86
86
 
87
87
  },
88
88
 

3

誤字

2021/06/23 11:25

投稿

okeke
okeke

スコア8

test CHANGED
File without changes
test CHANGED
@@ -80,6 +80,12 @@
80
80
 
81
81
  〜〜
82
82
 
83
+ thumbs: {
84
+
85
+ swiper: galleryThumbs,
86
+
87
+ },
88
+
83
89
  });
84
90
 
85
91
  //AとCは同じ動きのため、CはHTMLにて.loopAと設定

2

追記,内容変更

2021/06/23 11:25

投稿

okeke
okeke

スコア8

test CHANGED
File without changes
test CHANGED
@@ -1,10 +1,8 @@
1
- Swiperのサムネイル表示にて、現状「A」と「B」が連動しています。
1
+ Swiperのサムネイル表示にて、現状「A」,「B」,「C」が連動しています。
2
2
 
3
- ＊「A」と「C」は同じ動きにしたい。（1枚づつ切り替わる）
3
+ が、「B」と「C」が連動しません。
4
4
 
5
- ＊Cは高さ可変のテキストキャプション
6
-
7
- それを、「A」、「B」、「C」、全て連動させたい場合、どうすれば良いでしょうか？
5
+ 「B」と「C」を連動させたい場合、どうすれば良いでしょうか？
8
6
 
9
7
 
10
8
 
@@ -13,8 +11,6 @@
13
11
 
14
12
 
15
13
 
16
-
17
- JQuery側で「thumbs:」を新たに追加すればいいのではと思いましたが機能せず
18
14
 
19
15
  ご教授いただければと存じます
20
16
 
@@ -32,7 +28,7 @@
32
28
 
33
29
  <div class="swiper-wrapper">
34
30
 
35
- //Aのループ
31
+ //Aのメイン画像ループ
36
32
 
37
33
  </div>
38
34
 
@@ -42,13 +38,13 @@
42
38
 
43
39
  <div class="swiper-wrapper">
44
40
 
45
- //Bのループ
41
+ //Bのサムネイル画像ループ
46
42
 
47
43
  </div>
48
44
 
49
45
  </div>
50
46
 
51
- <div class="swiper-container .loopC">
47
+ <div class="swiper-container .loopA">//Aと同じ動き
52
48
 
53
49
  <div class="swiper-wrapper">
54
50
 
@@ -80,39 +76,13 @@
80
76
 
81
77
 
82
78
 
83
- var nameC = new Swiper(".loopC", {
79
+ var nameA = new Swiper(".loopA", {
84
80
 
85
81
  〜〜
86
82
 
87
83
  });
88
84
 
89
-
90
-
91
- var nameA = new Swiper(".loopA", {
92
-
93
- 〜〜
94
-
95
- thumbs: {
96
-
97
- swiper: nameB,
98
-
99
- },
100
-
101
- //ここまで機能している
102
-
103
-
104
-
105
- //以下追記したが機能せず
85
+ //AとCは同じ動きのため、CはHTMLにて.loopAと設定
106
-
107
- thumbs: {
108
-
109
- swiper: nameC,
110
-
111
- },
112
-
113
-
114
-
115
- });
116
86
 
117
87
  });
118
88
 

1

誤字

2021/06/23 11:22

投稿

okeke
okeke

スコア8

test CHANGED
File without changes
test CHANGED
@@ -1,8 +1,10 @@
1
1
  Swiperのサムネイル表示にて、現状「A」と「B」が連動しています。
2
2
 
3
+ ＊「A」と「C」は同じ動きにしたい。（1枚づつ切り替わる）
4
+
5
+ ＊Cは高さ可変のテキストキャプション
6
+
3
7
  それを、「A」、「B」、「C」、全て連動させたい場合、どうすれば良いでしょうか？
4
-
5
- （Cはテキストキャプションです）
6
8
 
7
9
 
8
10