質問編集履歴
1
CSS、JSのコードを追記しました。画面キャプチャを追加しました。
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
|
|
6
6
|
```html
|
|
7
7
|
<div class="slider mypattern">
|
|
8
|
-
<div><a href="#"><img src="./img/img01.jpg"></a><p class="textphoto">画像1テキスト</p></div>
|
|
8
|
+
<div><a href="#"><img src="./img/img01.jpg"></a><p class="textphoto">画像1テキスト]</p></div>
|
|
9
9
|
<div><a href="#"><img src="./img/img02.jpg"></a><p class="textphoto">画像2テキスト</p></div>
|
|
10
10
|
<div><a href="#"><img src="./img/img03.jpg"></a><p class="textphoto">画像3テキスト</p></div>
|
|
11
11
|
<div><a href="#"><img src="./img/img04.jpg"></a><p class="textphoto">画像4テキスト</p></div>
|
|
@@ -15,6 +15,29 @@
|
|
|
15
15
|
```
|
|
16
16
|
|
|
17
17
|
```css
|
|
18
|
+
.slider {
|
|
19
|
+
display:none;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
.slider.slick-initialized {
|
|
23
|
+
display: block;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
.slider {
|
|
27
|
+
width: 90%;
|
|
28
|
+
margin: 0 auto 80px;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
.slick-slide img {
|
|
32
|
+
width: 100%;
|
|
33
|
+
height:350px;
|
|
34
|
+
}
|
|
35
|
+
.mypattern{
|
|
36
|
+
width: 100%;
|
|
37
|
+
}
|
|
38
|
+
.mypattern .slick-slide{
|
|
39
|
+
margin: 5px;
|
|
40
|
+
}
|
|
18
41
|
.mypattern .slick-slide:not(.slick-center) {
|
|
19
42
|
-webkit-filter: grayscale(100%);
|
|
20
43
|
-moz-filter: grayscale(100%);
|
|
@@ -36,4 +59,22 @@
|
|
|
36
59
|
position:absolute;
|
|
37
60
|
padding-right:1rem;
|
|
38
61
|
}
|
|
39
|
-
```
|
|
62
|
+
```
|
|
63
|
+
|
|
64
|
+
```JS
|
|
65
|
+
<script>
|
|
66
|
+
$("document").ready(function(){
|
|
67
|
+
$('.mypattern').slick({
|
|
68
|
+
autoplay: true,
|
|
69
|
+
autoplaySpeed: 5000,
|
|
70
|
+
speed: 800,
|
|
71
|
+
dots: true,
|
|
72
|
+
arrows: false,
|
|
73
|
+
centerMode: true,
|
|
74
|
+
centerPadding: '20%'
|
|
75
|
+
});
|
|
76
|
+
});
|
|
77
|
+
</script>
|
|
78
|
+
```
|
|
79
|
+
|
|
80
|
+
|