teratail
回答率
85.47%
質問するログイン新規登録
トップに関する質問slick slider サムネイル固定連動を複数設置したい。

編集履歴

質問編集履歴

2

参考元コード追加

2021/11/02 00:26

投稿

masakaito
masakaito

スコア0

test CHANGED
File without changes
test CHANGED
@@ -20,7 +20,7 @@
20
20
 
21
21
  ```ここに言語名を入力
22
22
 
23
- javaScript
23
+ 参考元javaScript
24
24
 
25
25
 
26
26
 
@@ -72,101 +72,101 @@
72
72
 
73
73
 
74
74
 
75
+ 参考元html
76
+
77
+ <ul class="slide">
78
+
79
+ <li class="item"><img src="https://picsum.photos/id/301/1024/768" alt="" /></li>
80
+
81
+ <li class="item"><img src="https://picsum.photos/id/305/1024/768" alt="" /></li>
82
+
83
+ <li class="item"><img src="https://picsum.photos/id/307/1024/768" alt="" /></li>
84
+
85
+ <li class="item"><img src="https://picsum.photos/id/308/1024/768" alt="" /></li>
86
+
87
+ <li class="item"><img src="https://picsum.photos/id/310/1024/768" alt="" /></li>
88
+
89
+ <li class="item"><img src="https://picsum.photos/id/315/1024/768" alt="" /></li>
90
+
91
+ <li class="item"><img src="https://picsum.photos/id/318/1024/768" alt="" /></li>
92
+
93
+ <li class="item"><img src="https://picsum.photos/id/320/1024/768" alt="" /></li>
94
+
95
+ <li class="item"><img src="https://picsum.photos/id/321/1024/768" alt="" /></li>
96
+
97
+ <li class="item"><img src="https://picsum.photos/id/331/1024/768" alt="" /></li>
98
+
99
+ </ul>
100
+
101
+ <ul class="slide-navigation">
102
+
103
+ <li class="item"><img src="https://picsum.photos/id/301/1024/768" alt="" /></li>
104
+
105
+ <li class="item"><img src="https://picsum.photos/id/305/1024/768" alt="" /></li>
106
+
107
+ <li class="item"><img src="https://picsum.photos/id/307/1024/768" alt="" /></li>
108
+
109
+ <li class="item"><img src="https://picsum.photos/id/308/1024/768" alt="" /></li>
110
+
111
+ <li class="item"><img src="https://picsum.photos/id/310/1024/768" alt="" /></li>
112
+
113
+ <li class="item"><img src="https://picsum.photos/id/315/1024/768" alt="" /></li>
114
+
115
+ <li class="item"><img src="https://picsum.photos/id/318/1024/768" alt="" /></li>
116
+
117
+ <li class="item"><img src="https://picsum.photos/id/320/1024/768" alt="" /></li>
118
+
119
+ <li class="item"><img src="https://picsum.photos/id/321/1024/768" alt="" /></li>
120
+
121
+ <li class="item"><img src="https://picsum.photos/id/331/1024/768" alt="" /></li>
122
+
123
+ </ul>
124
+
125
+
126
+
127
+
128
+
129
+
130
+
131
+
132
+
133
+
134
+
135
+
136
+
137
+
138
+
139
+ ### 試したこと
140
+
141
+ **試したこと**
142
+
143
+ javascript
144
+
145
+ $slide = $('.slide');
146
+
147
+ $navigation = $('.slide-navigation .item');
148
+
149
+ 上記部分を複製
150
+
151
+
152
+
153
+ $slide = $('.slide1');
154
+
155
+ $navigation = $('.slide-navigation1 .item');
156
+
157
+
158
+
159
+ $slide = $('.slide2');
160
+
161
+ $navigation = $('.slide-navigation2 .item');
162
+
163
+
164
+
165
+
166
+
75
167
  html
76
168
 
77
- <ul class="slide">
78
-
79
- <li class="item"><img src="https://picsum.photos/id/301/1024/768" alt="" /></li>
80
-
81
- <li class="item"><img src="https://picsum.photos/id/305/1024/768" alt="" /></li>
82
-
83
- <li class="item"><img src="https://picsum.photos/id/307/1024/768" alt="" /></li>
84
-
85
- <li class="item"><img src="https://picsum.photos/id/308/1024/768" alt="" /></li>
86
-
87
- <li class="item"><img src="https://picsum.photos/id/310/1024/768" alt="" /></li>
88
-
89
- <li class="item"><img src="https://picsum.photos/id/315/1024/768" alt="" /></li>
90
-
91
- <li class="item"><img src="https://picsum.photos/id/318/1024/768" alt="" /></li>
92
-
93
- <li class="item"><img src="https://picsum.photos/id/320/1024/768" alt="" /></li>
94
-
95
- <li class="item"><img src="https://picsum.photos/id/321/1024/768" alt="" /></li>
96
-
97
- <li class="item"><img src="https://picsum.photos/id/331/1024/768" alt="" /></li>
98
-
99
- </ul>
100
-
101
- <ul class="slide-navigation">
102
-
103
- <li class="item"><img src="https://picsum.photos/id/301/1024/768" alt="" /></li>
104
-
105
- <li class="item"><img src="https://picsum.photos/id/305/1024/768" alt="" /></li>
106
-
107
- <li class="item"><img src="https://picsum.photos/id/307/1024/768" alt="" /></li>
108
-
109
- <li class="item"><img src="https://picsum.photos/id/308/1024/768" alt="" /></li>
110
-
111
- <li class="item"><img src="https://picsum.photos/id/310/1024/768" alt="" /></li>
112
-
113
- <li class="item"><img src="https://picsum.photos/id/315/1024/768" alt="" /></li>
114
-
115
- <li class="item"><img src="https://picsum.photos/id/318/1024/768" alt="" /></li>
116
-
117
- <li class="item"><img src="https://picsum.photos/id/320/1024/768" alt="" /></li>
118
-
119
- <li class="item"><img src="https://picsum.photos/id/321/1024/768" alt="" /></li>
120
-
121
- <li class="item"><img src="https://picsum.photos/id/331/1024/768" alt="" /></li>
122
-
123
- </ul>
124
-
125
-
126
-
127
-
128
-
129
-
130
-
131
-
132
-
133
-
134
-
135
-
136
-
137
-
138
-
139
- ### 試したこと
140
-
141
- **試したこと**
142
-
143
-
144
-
145
- $slide = $('.slide');
146
-
147
- $navigation = $('.slide-navigation .item');
148
-
149
- 上記部分を複製
150
-
151
-
152
-
153
- $slide = $('.slide1');
154
-
155
- $navigation = $('.slide-navigation1 .item');
156
-
157
-
158
-
159
- $slide = $('.slide2');
160
-
161
- $navigation = $('.slide-navigation2 .item');
162
-
163
-
164
-
165
-
166
-
167
- classをそれぞれ変更
169
+ classをそれぞれ追加変更
168
-
169
- html
170
170
 
171
171
 
172
172
 

1

参考もとコードを追加

2021/11/02 00:26

投稿

masakaito
masakaito

スコア0

test CHANGED
File without changes
test CHANGED
@@ -24,11 +24,131 @@
24
24
 
25
25
 
26
26
 
27
+ $(function() {
28
+
29
+ $slide = $('.slide');
30
+
31
+ $navigation = $('.slide-navigation .item');
32
+
33
+
34
+
35
+ $slide.slick({ //slickスライダー作成
36
+
37
+ infinite: true,
38
+
39
+ slidesToShow: 1,
40
+
41
+ slidesToScroll: 1,
42
+
43
+ arrows: false,
44
+
45
+ fade: true,
46
+
47
+ });
48
+
49
+ $navigation.each(function(index){ //サムネイルに連番付与属性
50
+
51
+ $(this).attr('data-number', index);
52
+
53
+ });
54
+
55
+ $navigation.eq(0).addClass('current'); //1枚をオーバーレイ
56
+
57
+
58
+
59
+ $navigation.on('click', function(){ //サムネイルクリック時イベント
60
+
61
+ var number = $(this).attr('data-number');
62
+
63
+ $slide.slick('slickGoTo', number, true);
64
+
65
+ $(this).siblings().removeClass('current');
66
+
67
+ $(this).addClass('current');
68
+
69
+ });
70
+
71
+ });
72
+
73
+
74
+
75
+ html
76
+
77
+ <ul class="slide">
78
+
79
+ <li class="item"><img src="https://picsum.photos/id/301/1024/768" alt="" /></li>
80
+
81
+ <li class="item"><img src="https://picsum.photos/id/305/1024/768" alt="" /></li>
82
+
83
+ <li class="item"><img src="https://picsum.photos/id/307/1024/768" alt="" /></li>
84
+
85
+ <li class="item"><img src="https://picsum.photos/id/308/1024/768" alt="" /></li>
86
+
87
+ <li class="item"><img src="https://picsum.photos/id/310/1024/768" alt="" /></li>
88
+
89
+ <li class="item"><img src="https://picsum.photos/id/315/1024/768" alt="" /></li>
90
+
91
+ <li class="item"><img src="https://picsum.photos/id/318/1024/768" alt="" /></li>
92
+
93
+ <li class="item"><img src="https://picsum.photos/id/320/1024/768" alt="" /></li>
94
+
95
+ <li class="item"><img src="https://picsum.photos/id/321/1024/768" alt="" /></li>
96
+
97
+ <li class="item"><img src="https://picsum.photos/id/331/1024/768" alt="" /></li>
98
+
99
+ </ul>
100
+
101
+ <ul class="slide-navigation">
102
+
103
+ <li class="item"><img src="https://picsum.photos/id/301/1024/768" alt="" /></li>
104
+
105
+ <li class="item"><img src="https://picsum.photos/id/305/1024/768" alt="" /></li>
106
+
107
+ <li class="item"><img src="https://picsum.photos/id/307/1024/768" alt="" /></li>
108
+
109
+ <li class="item"><img src="https://picsum.photos/id/308/1024/768" alt="" /></li>
110
+
111
+ <li class="item"><img src="https://picsum.photos/id/310/1024/768" alt="" /></li>
112
+
113
+ <li class="item"><img src="https://picsum.photos/id/315/1024/768" alt="" /></li>
114
+
115
+ <li class="item"><img src="https://picsum.photos/id/318/1024/768" alt="" /></li>
116
+
117
+ <li class="item"><img src="https://picsum.photos/id/320/1024/768" alt="" /></li>
118
+
119
+ <li class="item"><img src="https://picsum.photos/id/321/1024/768" alt="" /></li>
120
+
121
+ <li class="item"><img src="https://picsum.photos/id/331/1024/768" alt="" /></li>
122
+
123
+ </ul>
124
+
125
+
126
+
127
+
128
+
129
+
130
+
131
+
132
+
133
+
134
+
135
+
136
+
137
+
138
+
139
+ ### 試したこと
140
+
141
+ **試したこと**
142
+
143
+
144
+
27
145
  $slide = $('.slide');
28
146
 
29
147
  $navigation = $('.slide-navigation .item');
30
148
 
31
- を複製
149
+ 上記部分を複製
150
+
151
+
32
152
 
33
153
  $slide = $('.slide1');
34
154
 
@@ -44,6 +164,8 @@
44
164
 
45
165
 
46
166
 
167
+ classをそれぞれ変更
168
+
47
169
  html
48
170
 
49
171
 
@@ -64,7 +186,7 @@
64
186
 
65
187
  </div>
66
188
 
67
- </div>
189
+
68
190
 
69
191
 
70
192
 
@@ -84,7 +206,7 @@
84
206
 
85
207
  </div>
86
208
 
87
- </div>
209
+
88
210
 
89
211
 
90
212
 
@@ -104,8 +226,6 @@
104
226
 
105
227
  </div>
106
228
 
107
- </div>
108
-
109
229
 
110
230
 
111
231