質問編集履歴

1

CSS、JSのコードを追記しました。画面キャプチャを追加しました。

2018/02/23 05:13

投稿

kagaminoB
kagaminoB

スコア14

test CHANGED
File without changes
test CHANGED
@@ -12,7 +12,7 @@
12
12
 
13
13
  <div class="slider mypattern">
14
14
 
15
- <div><a href="#"><img src="./img/img01.jpg"></a><p class="textphoto">画像1テキスト</p></div>
15
+ <div><a href="#"><img src="./img/img01.jpg"></a><p class="textphoto">画像1テキスト]</p></div>
16
16
 
17
17
  <div><a href="#"><img src="./img/img02.jpg"></a><p class="textphoto">画像2テキスト</p></div>
18
18
 
@@ -31,6 +31,52 @@
31
31
 
32
32
 
33
33
  ```css
34
+
35
+ .slider {
36
+
37
+ display:none;
38
+
39
+ }
40
+
41
+
42
+
43
+ .slider.slick-initialized {
44
+
45
+ display: block;
46
+
47
+ }
48
+
49
+
50
+
51
+ .slider {
52
+
53
+ width: 90%;
54
+
55
+ margin: 0 auto 80px;
56
+
57
+ }
58
+
59
+
60
+
61
+ .slick-slide img {
62
+
63
+ width: 100%;
64
+
65
+ height:350px;
66
+
67
+ }
68
+
69
+ .mypattern{
70
+
71
+ width: 100%;
72
+
73
+ }
74
+
75
+ .mypattern .slick-slide{
76
+
77
+ margin: 5px;
78
+
79
+ }
34
80
 
35
81
  .mypattern .slick-slide:not(.slick-center) {
36
82
 
@@ -75,3 +121,39 @@
75
121
  }
76
122
 
77
123
  ```
124
+
125
+
126
+
127
+ ```JS
128
+
129
+ <script>
130
+
131
+ $("document").ready(function(){
132
+
133
+ $('.mypattern').slick({
134
+
135
+ autoplay: true,
136
+
137
+ autoplaySpeed: 5000,
138
+
139
+ speed: 800,
140
+
141
+ dots: true,
142
+
143
+ arrows: false,
144
+
145
+ centerMode: true,
146
+
147
+ centerPadding: '20%'
148
+
149
+ });
150
+
151
+ });
152
+
153
+ </script>
154
+
155
+ ```
156
+
157
+
158
+
159
+ ![イメージ説明](f756b3680dfd84a9422c32c102deaee7.jpeg)