質問編集履歴
5
タグの変更（PHP→Wordpressへ）
title
CHANGED
|
File without changes
|
body
CHANGED
|
File without changes
|
4
WordPressにslickを読み込む部分を追加しました。
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -73,7 +73,12 @@
|
|
|
73
73
|
</div>
|
|
74
74
|
</div>
|
|
75
75
|
```
|
|
76
|
+
```
|
|
77
|
+
(WordPressにslickを読み込む部分)
|
|
78
|
+
<link rel="stylesheet" type="text/css" href="/slick/slick.css"/>
|
|
79
|
+
<link rel="stylesheet" type="text/css" href="/slick/slick-theme.css"/>
|
|
80
|
+
<script type="text/javascript" src="/slick/slick.min.js"></script>
|
|
76
|
-
|
|
81
|
+
（CSS）
|
|
77
82
|
<style>#wrap{background-color: #fff;padding-bottom:1em;}
|
|
78
83
|
#main_slider{width: 100%;margin: 0 auto}
|
|
79
84
|
#thumbnail_slider{width: 100%;margin: 0 auto 10px;padding:2px;
|
3
スライダーが崩れている画像を追加
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -13,7 +13,9 @@
|
|
|
13
13
|
＞また「PHP」はどのように関係するのでしょうか？質問内容からは分かりませんでした。
|
|
14
14
|
Wordpressを使っているため、使っていない場合と比べて、JQueryの書き方が違うと思いPHPと記載しました。
|
|
15
15
|
|
|
16
|
+
|
|
16
17
|
|
|
18
|
+
|
|
17
19
|
```ここに言語を入力
|
|
18
20
|
(html)
|
|
19
21
|
<div id="wrap">
|
2
発生している問題や見やすいように改行を入れました！
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -1,7 +1,19 @@
|
|
|
1
|
+
■前提・実現したいこと
|
|
1
|
-
[Slick js](http://kenwheeler.github.io/slick/) のスライダーを同一ページ内に複数設置したいのですが、複数設置した場合、表示が壊れてしまいます。
|
|
2
|
+
[Slick js](http://kenwheeler.github.io/slick/) のスライダーを同一ページ内に複数設置したいのですが、複数設置した場合、表示が壊れてしまいます。各々で動かしたい場合のコードの書き方をご享受ください。
|
|
2
3
|
|
|
3
|
-
|
|
4
|
+
■発生している問題・エラーメッセージ
|
|
5
|
+
一つのページでidを指定しているため、同一ページでスライダーを設置すると処理が同じなため被ってしまう状態です。個別に設定を変える事で動くとは思うのですが、どのようにidの設定を変更するべきか分かりかねています。
|
|
6
|
+
※スライダーの設定は外注に依頼したため、私の知識ではどの部分をコーディングしていいかわからないため、お力添えいただければ幸いです！
|
|
4
7
|
|
|
8
|
+
何か必要なものがございましたらお気軽にお問い合わせください。
|
|
9
|
+
|
|
10
|
+
＞ブラウザデベロッパーツールのコンソールにエラーが出ていないかもご確認ください
|
|
11
|
+
コンソールでのエラーはでておりません。
|
|
12
|
+
|
|
13
|
+
＞また「PHP」はどのように関係するのでしょうか？質問内容からは分かりませんでした。
|
|
14
|
+
Wordpressを使っているため、使っていない場合と比べて、JQueryの書き方が違うと思いPHPと記載しました。
|
|
15
|
+
|
|
16
|
+
|
|
5
17
|
```ここに言語を入力
|
|
6
18
|
(html)
|
|
7
19
|
<div id="wrap">
|
|
@@ -59,11 +71,41 @@
|
|
|
59
71
|
</div>
|
|
60
72
|
</div>
|
|
61
73
|
```
|
|
74
|
+
```（CSS）
|
|
75
|
+
<style>#wrap{background-color: #fff;padding-bottom:1em;}
|
|
76
|
+
#main_slider{width: 100%;margin: 0 auto}
|
|
77
|
+
#thumbnail_slider{width: 100%;margin: 0 auto 10px;padding:2px;
|
|
78
|
+
background-color: #000;}
|
|
79
|
+
.slide-item img{margin-bottom:0;width: 100%;}
|
|
80
|
+
.thumbnail-item img{width: 98%;margin: 0 auto;background-color: #000;opacity: 0.5;}
|
|
81
|
+
#main_slider .slider_first{background: rgba(0,0,0,0.7);}
|
|
82
|
+
#main_slider .slider_text{font-size: 0.7em;position: absolute;bottom: 0;padding:2em;width:100%;z-index:101;}
|
|
83
|
+
#main_slider .slider_text span{color:#fff}
|
|
84
|
+
#main_slider .slider_img img{}
|
|
85
|
+
.slick-next{right:10px;}
|
|
86
|
+
.slick-prev{left:10px;z-index: 100;}
|
|
87
|
+
.thumbnail-item img:hover{opacity:1}
|
|
88
|
+
#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;}
|
|
89
|
+
#entry-1{float:right;background-color:#229833;right:50.7%;}
|
|
90
|
+
#entry-2{float:right;background-color:#83d159;right: 47.7%;}
|
|
91
|
+
#entry-1 a,#entry-2 a{text-decoration:none}
|
|
92
|
+
#entry-1 span,#entry-2 span{color:#fff;}
|
|
93
|
+
@media (max-width:1024px) and (min-width:768px){#entry-1,#entry-2{font-size:1.1rem;padding:0.5rem;}}
|
|
94
|
+
@media (max-width:620px) and (min-width:468px){#entry-1,#entry-2{font-size:1.1rem;padding:0.5rem;}}
|
|
95
|
+
@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%;}
|
|
96
|
+
.s-size-sp #entry-1{right:50.7%;}
|
|
97
|
+
.s-size-sp #entry-2{right:47.7%;}}
|
|
98
|
+
</style>
|
|
62
99
|
```
|
|
63
|
-
（JS）
|
|
64
|
-
<style>#wrap{background-color: #fff;padding-bottom:1em;}#main_slider{width: 100%;margin: 0 auto}#thumbnail_slider{width: 100%;margin: 0 auto 10px;padding:2px;
|
|
65
|
-
background-color: #000;}.slide-item img{margin-bottom:0;width: 100%;}.thumbnail-item img{width: 98%;margin: 0 auto;background-color: #000;opacity: 0.5;}#main_slider .slider_first{background: rgba(0,0,0,0.7);}#main_slider .slider_text{font-size: 0.7em;position: absolute;bottom: 0;padding:2em;width:100%;z-index:101;}#main_slider .slider_text span{color:#fff}#main_slider .slider_img img{}.slick-next{right:10px;}.slick-prev{left:10px;z-index: 100;}.thumbnail-item img:hover{opacity:1}#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;}#entry-1{float:right;background-color:#229833;right:50.7%;}#entry-2{float:right;background-color:#83d159;right: 47.7%;}#entry-1 a,#entry-2 a{text-decoration:none}#entry-1 span,#entry-2 span{color:#fff;}@media (max-width:1024px) and (min-width:768px){#entry-1,#entry-2{font-size:1.1rem;padding:0.5rem;}}@media (max-width:620px) and (min-width:468px){#entry-1,#entry-2{font-size:1.1rem;padding:0.5rem;}}@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%;}.s-size-sp #entry-1{right:50.7%;}.s-size-sp #entry-2{right:47.7%;}}</style>
|
|
66
100
|
|
|
67
|
-
|
|
101
|
+
|
|
102
|
+
```（JS）
|
|
103
|
+
<script>
|
|
104
|
+
$(function(){var mainSlider = "#main_slider";var thumbnailSlider = "#thumbnail_slider";
|
|
105
|
+
$(mainSlider).slick({arrows: true,asNavFor: thumbnailSlider});
|
|
106
|
+
$(thumbnailSlider).slick({slidesToShow: 5,speed: 1000,asNavFor: mainSlider});
|
|
107
|
+
$(thumbnailSlider+" .slick-slide").on('click',function(){var index =
|
|
108
|
+
$(this).attr("data-slick-index");
|
|
109
|
+
$(thumbnailSlider).slick("slickGoTo",index,false);});});
|
|
68
110
|
</script>
|
|
69
111
|
```
|
1
マークダウンの入力
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
各々で動かしたい場合のコードの書き方をご享受ください。
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
```ここに言語を入力
|
|
6
6
|
(html)
|
|
7
7
|
<div id="wrap">
|
|
8
8
|
<div id="main_slider">
|
|
@@ -58,10 +58,12 @@
|
|
|
58
58
|
<div class="thumbnail-item"><a href="#"><img src="img/small/6.png"></a></div>
|
|
59
59
|
</div>
|
|
60
60
|
</div>
|
|
61
|
-
|
|
61
|
+
```
|
|
62
|
+
```
|
|
62
63
|
（JS）
|
|
63
64
|
<style>#wrap{background-color: #fff;padding-bottom:1em;}#main_slider{width: 100%;margin: 0 auto}#thumbnail_slider{width: 100%;margin: 0 auto 10px;padding:2px;
|
|
64
65
|
background-color: #000;}.slide-item img{margin-bottom:0;width: 100%;}.thumbnail-item img{width: 98%;margin: 0 auto;background-color: #000;opacity: 0.5;}#main_slider .slider_first{background: rgba(0,0,0,0.7);}#main_slider .slider_text{font-size: 0.7em;position: absolute;bottom: 0;padding:2em;width:100%;z-index:101;}#main_slider .slider_text span{color:#fff}#main_slider .slider_img img{}.slick-next{right:10px;}.slick-prev{left:10px;z-index: 100;}.thumbnail-item img:hover{opacity:1}#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;}#entry-1{float:right;background-color:#229833;right:50.7%;}#entry-2{float:right;background-color:#83d159;right: 47.7%;}#entry-1 a,#entry-2 a{text-decoration:none}#entry-1 span,#entry-2 span{color:#fff;}@media (max-width:1024px) and (min-width:768px){#entry-1,#entry-2{font-size:1.1rem;padding:0.5rem;}}@media (max-width:620px) and (min-width:468px){#entry-1,#entry-2{font-size:1.1rem;padding:0.5rem;}}@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%;}.s-size-sp #entry-1{right:50.7%;}.s-size-sp #entry-2{right:47.7%;}}</style>
|
|
65
66
|
|
|
66
67
|
<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);});});
|
|
67
|
-
</script>
|
|
68
|
+
</script>
|
|
69
|
+
```
|