質問編集履歴
1
CSS、JSのコードを追記しました。画面キャプチャを追加しました。
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)
|