質問編集履歴
5
タグの変更（PHP→Wordpressへ）
test
CHANGED
|
File without changes
|
test
CHANGED
|
File without changes
|
4
WordPressにslickを読み込む部分を追加しました。
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -148,7 +148,17 @@
|
|
|
148
148
|
|
|
149
149
|
```
|
|
150
150
|
|
|
151
|
+
```
|
|
152
|
+
|
|
153
|
+
(WordPressにslickを読み込む部分)
|
|
154
|
+
|
|
155
|
+
<link rel="stylesheet" type="text/css" href="/slick/slick.css"/>
|
|
156
|
+
|
|
157
|
+
<link rel="stylesheet" type="text/css" href="/slick/slick-theme.css"/>
|
|
158
|
+
|
|
159
|
+
<script type="text/javascript" src="/slick/slick.min.js"></script>
|
|
160
|
+
|
|
151
|
-
|
|
161
|
+
（CSS）
|
|
152
162
|
|
|
153
163
|
<style>#wrap{background-color: #fff;padding-bottom:1em;}
|
|
154
164
|
|
3
スライダーが崩れている画像を追加
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -28,6 +28,10 @@
|
|
|
28
28
|
|
|
29
29
|
|
|
30
30
|
|
|
31
|
+
|
|
32
|
+
|
|
33
|
+
|
|
34
|
+
|
|
31
35
|
|
|
32
36
|
|
|
33
37
|
```ここに言語を入力
|
2
発生している問題や見やすいように改行を入れました！
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -1,8 +1,32 @@
|
|
|
1
|
+
■前提・実現したいこと
|
|
2
|
+
|
|
1
|
-
[Slick js](http://kenwheeler.github.io/slick/) のスライダーを同一ページ内に複数設置したいのですが、複数設置した場合、表示が壊れてしまいます。
|
|
3
|
+
[Slick js](http://kenwheeler.github.io/slick/) のスライダーを同一ページ内に複数設置したいのですが、複数設置した場合、表示が壊れてしまいます。各々で動かしたい場合のコードの書き方をご享受ください。
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
|
|
2
|
-
|
|
7
|
+
■発生している問題・エラーメッセージ
|
|
8
|
+
|
|
3
|
-
|
|
9
|
+
一つのページでidを指定しているため、同一ページでスライダーを設置すると処理が同じなため被ってしまう状態です。個別に設定を変える事で動くとは思うのですが、どのようにidの設定を変更するべきか分かりかねています。
|
|
10
|
+
|
|
4
|
-
|
|
11
|
+
※スライダーの設定は外注に依頼したため、私の知識ではどの部分をコーディングしていいかわからないため、お力添えいただければ幸いです！
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
5
|
-
|
|
15
|
+
何か必要なものがございましたらお気軽にお問い合わせください。
|
|
16
|
+
|
|
17
|
+
|
|
18
|
+
|
|
19
|
+
＞ブラウザデベロッパーツールのコンソールにエラーが出ていないかもご確認ください
|
|
20
|
+
|
|
21
|
+
コンソールでのエラーはでておりません。
|
|
22
|
+
|
|
23
|
+
|
|
24
|
+
|
|
25
|
+
＞また「PHP」はどのように関係するのでしょうか？質問内容からは分かりませんでした。
|
|
26
|
+
|
|
27
|
+
Wordpressを使っているため、使っていない場合と比べて、JQueryの書き方が違うと思いPHPと記載しました。
|
|
28
|
+
|
|
29
|
+
|
|
6
30
|
|
|
7
31
|
|
|
8
32
|
|
|
@@ -120,17 +144,77 @@
|
|
|
120
144
|
|
|
121
145
|
```
|
|
122
146
|
|
|
147
|
+
```（CSS）
|
|
148
|
+
|
|
149
|
+
<style>#wrap{background-color: #fff;padding-bottom:1em;}
|
|
150
|
+
|
|
151
|
+
#main_slider{width: 100%;margin: 0 auto}
|
|
152
|
+
|
|
153
|
+
#thumbnail_slider{width: 100%;margin: 0 auto 10px;padding:2px;
|
|
154
|
+
|
|
155
|
+
background-color: #000;}
|
|
156
|
+
|
|
157
|
+
.slide-item img{margin-bottom:0;width: 100%;}
|
|
158
|
+
|
|
159
|
+
.thumbnail-item img{width: 98%;margin: 0 auto;background-color: #000;opacity: 0.5;}
|
|
160
|
+
|
|
161
|
+
#main_slider .slider_first{background: rgba(0,0,0,0.7);}
|
|
162
|
+
|
|
163
|
+
#main_slider .slider_text{font-size: 0.7em;position: absolute;bottom: 0;padding:2em;width:100%;z-index:101;}
|
|
164
|
+
|
|
165
|
+
#main_slider .slider_text span{color:#fff}
|
|
166
|
+
|
|
167
|
+
#main_slider .slider_img img{}
|
|
168
|
+
|
|
169
|
+
.slick-next{right:10px;}
|
|
170
|
+
|
|
171
|
+
.slick-prev{left:10px;z-index: 100;}
|
|
172
|
+
|
|
173
|
+
.thumbnail-item img:hover{opacity:1}
|
|
174
|
+
|
|
175
|
+
#entry-1,#entry-2{width:1.66%!important;height:12%;text-align:center;position:absolute;top:66%;font-size:1.5rem;padding:1rem;font-weight:bold;border-radius:0.5em;}
|
|
176
|
+
|
|
177
|
+
#entry-1{float:right;background-color:#229833;right:50.7%;}
|
|
178
|
+
|
|
179
|
+
#entry-2{float:right;background-color:#83d159;right: 47.7%;}
|
|
180
|
+
|
|
181
|
+
#entry-1 a,#entry-2 a{text-decoration:none}
|
|
182
|
+
|
|
183
|
+
#entry-1 span,#entry-2 span{color:#fff;}
|
|
184
|
+
|
|
185
|
+
@media (max-width:1024px) and (min-width:768px){#entry-1,#entry-2{font-size:1.1rem;padding:0.5rem;}}
|
|
186
|
+
|
|
187
|
+
@media (max-width:620px) and (min-width:468px){#entry-1,#entry-2{font-size:1.1rem;padding:0.5rem;}}
|
|
188
|
+
|
|
189
|
+
@media (max-width: 467px){.s-size-sp #entry-1,.s-size-sp #entry-2{width:90px;height:35px;font-size:0.8em;padding:0.6rem;top:60%;}
|
|
190
|
+
|
|
191
|
+
.s-size-sp #entry-1{right:50.7%;}
|
|
192
|
+
|
|
193
|
+
.s-size-sp #entry-2{right:47.7%;}}
|
|
194
|
+
|
|
195
|
+
</style>
|
|
196
|
+
|
|
123
197
|
```
|
|
124
198
|
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
199
|
+
|
|
200
|
+
|
|
201
|
+
|
|
202
|
+
|
|
203
|
+
```（JS）
|
|
204
|
+
|
|
205
|
+
<script>
|
|
206
|
+
|
|
207
|
+
$(function(){var mainSlider = "#main_slider";var thumbnailSlider = "#thumbnail_slider";
|
|
208
|
+
|
|
209
|
+
$(mainSlider).slick({arrows: true,asNavFor: thumbnailSlider});
|
|
210
|
+
|
|
211
|
+
$(thumbnailSlider).slick({slidesToShow: 5,speed: 1000,asNavFor: mainSlider});
|
|
212
|
+
|
|
213
|
+
$(thumbnailSlider+" .slick-slide").on('click',function(){var index =
|
|
214
|
+
|
|
215
|
+
$(this).attr("data-slick-index");
|
|
216
|
+
|
|
217
|
+
$(thumbnailSlider).slick("slickGoTo",index,false);});});
|
|
134
218
|
|
|
135
219
|
</script>
|
|
136
220
|
|
1
マークダウンの入力
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
|
|
7
7
|
|
|
8
8
|
|
|
9
|
-
|
|
9
|
+
```ここに言語を入力
|
|
10
10
|
|
|
11
11
|
(html)
|
|
12
12
|
|
|
@@ -118,7 +118,9 @@
|
|
|
118
118
|
|
|
119
119
|
</div>
|
|
120
120
|
|
|
121
|
+
```
|
|
121
122
|
|
|
123
|
+
```
|
|
122
124
|
|
|
123
125
|
（JS）
|
|
124
126
|
|
|
@@ -131,3 +133,5 @@
|
|
|
131
133
|
<script>$(function(){var mainSlider = "#main_slider";var thumbnailSlider = "#thumbnail_slider";$(mainSlider).slick({arrows: true,asNavFor: thumbnailSlider});$(thumbnailSlider).slick({slidesToShow: 5,speed: 1000,asNavFor: mainSlider});$(thumbnailSlider+" .slick-slide").on('click',function(){var index = $(this).attr("data-slick-index");$(thumbnailSlider).slick("slickGoTo",index,false);});});
|
|
132
134
|
|
|
133
135
|
</script>
|
|
136
|
+
|
|
137
|
+
```
|