回答編集履歴

5

追記

2019/04/30 08:49

投稿

wataame
wataame

スコア302

test CHANGED
@@ -22,10 +22,162 @@
22
22
 
23
23
 
24
24
 
25
+ ```slick.html
26
+
25
27
  <script>
26
28
 
27
29
  $('#timeimg').slick({
28
30
 
31
+ arrows:false,
32
+
33
+ slidesToShow:1,
34
+
35
+ slidesToScroll:1,
36
+
37
+ autoplay:true,
38
+
39
+ autoplaySpeed:5000,
40
+
41
+ speed:10000 //ゆっくり移動
42
+
43
+ });
44
+
45
+ </script>
46
+
47
+ ```
48
+
49
+
50
+
51
+ 追記1:Background-colorとmaskとbackground-imgを消すと画像のように通常のslick.jsのスライドが出てきます。
52
+
53
+ 実装するなら背景画像と同じ色で好きな形の画像を.png形式で作成。
54
+
55
+ 背景画像とmaskに指定すれば良いかと思います。
56
+
57
+ ![イメージ説明](a63c620d37ba34832af49e9847dd5b56.jpeg)
58
+
59
+ ※便箋的にcssを直接書いていますが別ファイルにしてください。
60
+
61
+
62
+
63
+ ```slick.html
64
+
65
+ <html lang="ja"><head>
66
+
67
+ <meta charset="UTF-8">
68
+
69
+ <meta name="viewport" content="width=device-width">
70
+
71
+ <title>slick Current Class Examples</title>
72
+
73
+
74
+
75
+
76
+
77
+ <link rel="stylesheet" type="text/css" href="slick/slick.css" media="all">
78
+
79
+ <link rel="stylesheet" type="text/css" href="slick/slick-theme.css" media="all">
80
+
81
+ <link rel="stylesheet" type="text/css" href="slick/style.css" media="all">
82
+
83
+ <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
84
+
85
+ <script type="text/javascript" src="js/slick.min.js"></script>
86
+
87
+
88
+
89
+
90
+
91
+ </head>
92
+
93
+
94
+
95
+ <body>
96
+
97
+
98
+
99
+ <style>
100
+
101
+
102
+
103
+
104
+
105
+
106
+
107
+ #whole{
108
+
109
+ width:100%;
110
+
111
+ }
112
+
113
+ #wholes{
114
+
115
+ width:400px;
116
+
117
+ height:400px;
118
+
119
+ border-radius:50%;
120
+
121
+ border:1px solid #fff;
122
+
123
+ margin:60px auto 0 auto;
124
+
125
+ overflow:hidden;
126
+
127
+ mask-image: url("https://cafe-steen.com/common/img/mask_scene.png");
128
+
129
+ -webkit-mask-image: url("https://cafe-steen.com/common/img/mask_scene.png");
130
+
131
+ }
132
+
133
+ #timeimg{
134
+
135
+ width:500px;
136
+
137
+ height:435px;
138
+
139
+ }
140
+
141
+
142
+
143
+ </style>
144
+
145
+
146
+
147
+
148
+
149
+
150
+
151
+ <div id="whole">
152
+
153
+ <div id="wholes">
154
+
155
+ <ul id="timeimg">
156
+
157
+ <li><img src="https://images.pexels.com/photos/1251175/pexels-photo-1251175.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="" /></li>
158
+
159
+ <li><img src="https://images.pexels.com/photos/302899/pexels-photo-302899.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="" /></li>
160
+
161
+ <li><img src="https://images.pexels.com/photos/434213/pexels-photo-434213.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="" /></li>
162
+
163
+ <li><img src="https://images.pexels.com/photos/6347/coffee-cup-working-happy.jpg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="" /></li>
164
+
165
+ <li><img src="https://images.pexels.com/photos/678654/pexels-photo-678654.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="" /></li>
166
+
167
+ <li><img src="https://images.pexels.com/photos/1415555/pexels-photo-1415555.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="" /></li>
168
+
169
+ </ul>
170
+
171
+ </div>
172
+
173
+ </div>
174
+
175
+
176
+
177
+ <script>
178
+
179
+ $('#timeimg').slick({
180
+
29
181
  arrows:false,
30
182
 
31
183
  slidesToShow:1,
@@ -44,154 +196,6 @@
44
196
 
45
197
 
46
198
 
47
- 追記1:Background-colorとmaskとbackground-imgを消すと画像のように通常のslick.jsのスライドが出てきます。
48
-
49
- 実装するなら背景画像と同じ色で好きな形の画像を.png形式で作成。
50
-
51
- 背景画像とmaskに指定すれば良いかと思います。
52
-
53
- ![イメージ説明](a63c620d37ba34832af49e9847dd5b56.jpeg)
54
-
55
- ※便箋的にcssを直接書いていますが別ファイルにしてください。
56
-
57
-
58
-
59
- ```slick.html
60
-
61
- <html lang="ja"><head>
62
-
63
- <meta charset="UTF-8">
64
-
65
- <meta name="viewport" content="width=device-width">
66
-
67
- <title>slick Current Class Examples</title>
68
-
69
-
70
-
71
-
72
-
73
- <link rel="stylesheet" type="text/css" href="slick/slick.css" media="all">
74
-
75
- <link rel="stylesheet" type="text/css" href="slick/slick-theme.css" media="all">
76
-
77
- <link rel="stylesheet" type="text/css" href="slick/style.css" media="all">
78
-
79
- <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
80
-
81
- <script type="text/javascript" src="js/slick.min.js"></script>
82
-
83
-
84
-
85
-
86
-
87
- </head>
88
-
89
-
90
-
91
- <body>
92
-
93
-
94
-
95
- <style>
96
-
97
-
98
-
99
-
100
-
101
-
102
-
103
- #whole{
104
-
105
- width:100%;
106
-
107
- }
108
-
109
- #wholes{
110
-
111
- width:400px;
112
-
113
- height:400px;
114
-
115
- border-radius:50%;
116
-
117
- border:1px solid #fff;
118
-
119
- margin:60px auto 0 auto;
120
-
121
- overflow:hidden;
122
-
123
- mask-image: url("https://cafe-steen.com/common/img/mask_scene.png");
124
-
125
- -webkit-mask-image: url("https://cafe-steen.com/common/img/mask_scene.png");
126
-
127
- }
128
-
129
- #timeimg{
130
-
131
- width:500px;
132
-
133
- height:435px;
134
-
135
- }
136
-
137
-
138
-
139
- </style>
140
-
141
-
142
-
143
-
144
-
145
-
146
-
147
- <div id="whole">
148
-
149
- <div id="wholes">
150
-
151
- <ul id="timeimg">
152
-
153
- <li><img src="https://images.pexels.com/photos/1251175/pexels-photo-1251175.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="" /></li>
154
-
155
- <li><img src="https://images.pexels.com/photos/302899/pexels-photo-302899.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="" /></li>
156
-
157
- <li><img src="https://images.pexels.com/photos/434213/pexels-photo-434213.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="" /></li>
158
-
159
- <li><img src="https://images.pexels.com/photos/6347/coffee-cup-working-happy.jpg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="" /></li>
160
-
161
- <li><img src="https://images.pexels.com/photos/678654/pexels-photo-678654.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="" /></li>
162
-
163
- <li><img src="https://images.pexels.com/photos/1415555/pexels-photo-1415555.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="" /></li>
164
-
165
- </ul>
166
-
167
- </div>
168
-
169
- </div>
170
-
171
-
172
-
173
- <script>
174
-
175
- $('#timeimg').slick({
176
-
177
- arrows:false,
178
-
179
- slidesToShow:1,
180
-
181
- slidesToScroll:1,
182
-
183
- autoplay:true,
184
-
185
- autoplaySpeed:5000,
186
-
187
- speed:10000
188
-
189
- });
190
-
191
- </script>
192
-
193
-
194
-
195
199
  </body>
196
200
 
197
201
  </html>

4

追記

2019/04/30 08:49

投稿

wataame
wataame

スコア302

test CHANGED
@@ -14,7 +14,7 @@
14
14
 
15
15
 
16
16
 
17
- 画像がスライド=autoplay: true,// 自動再生
17
+ 画像がスライド=autoplay: true,// 自動再生
18
18
 
19
19
  ゆっくり移動=speed: 10000, //スライドスピード
20
20
 
@@ -41,3 +41,161 @@
41
41
  });
42
42
 
43
43
  </script>
44
+
45
+
46
+
47
+ 追記1:Background-colorとmaskとbackground-imgを消すと画像のように通常のslick.jsのスライドが出てきます。
48
+
49
+ 実装するなら背景画像と同じ色で好きな形の画像を.png形式で作成。
50
+
51
+ 背景画像とmaskに指定すれば良いかと思います。
52
+
53
+ ![イメージ説明](a63c620d37ba34832af49e9847dd5b56.jpeg)
54
+
55
+ ※便箋的にcssを直接書いていますが別ファイルにしてください。
56
+
57
+
58
+
59
+ ```slick.html
60
+
61
+ <html lang="ja"><head>
62
+
63
+ <meta charset="UTF-8">
64
+
65
+ <meta name="viewport" content="width=device-width">
66
+
67
+ <title>slick Current Class Examples</title>
68
+
69
+
70
+
71
+
72
+
73
+ <link rel="stylesheet" type="text/css" href="slick/slick.css" media="all">
74
+
75
+ <link rel="stylesheet" type="text/css" href="slick/slick-theme.css" media="all">
76
+
77
+ <link rel="stylesheet" type="text/css" href="slick/style.css" media="all">
78
+
79
+ <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
80
+
81
+ <script type="text/javascript" src="js/slick.min.js"></script>
82
+
83
+
84
+
85
+
86
+
87
+ </head>
88
+
89
+
90
+
91
+ <body>
92
+
93
+
94
+
95
+ <style>
96
+
97
+
98
+
99
+
100
+
101
+
102
+
103
+ #whole{
104
+
105
+ width:100%;
106
+
107
+ }
108
+
109
+ #wholes{
110
+
111
+ width:400px;
112
+
113
+ height:400px;
114
+
115
+ border-radius:50%;
116
+
117
+ border:1px solid #fff;
118
+
119
+ margin:60px auto 0 auto;
120
+
121
+ overflow:hidden;
122
+
123
+ mask-image: url("https://cafe-steen.com/common/img/mask_scene.png");
124
+
125
+ -webkit-mask-image: url("https://cafe-steen.com/common/img/mask_scene.png");
126
+
127
+ }
128
+
129
+ #timeimg{
130
+
131
+ width:500px;
132
+
133
+ height:435px;
134
+
135
+ }
136
+
137
+
138
+
139
+ </style>
140
+
141
+
142
+
143
+
144
+
145
+
146
+
147
+ <div id="whole">
148
+
149
+ <div id="wholes">
150
+
151
+ <ul id="timeimg">
152
+
153
+ <li><img src="https://images.pexels.com/photos/1251175/pexels-photo-1251175.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="" /></li>
154
+
155
+ <li><img src="https://images.pexels.com/photos/302899/pexels-photo-302899.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="" /></li>
156
+
157
+ <li><img src="https://images.pexels.com/photos/434213/pexels-photo-434213.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="" /></li>
158
+
159
+ <li><img src="https://images.pexels.com/photos/6347/coffee-cup-working-happy.jpg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="" /></li>
160
+
161
+ <li><img src="https://images.pexels.com/photos/678654/pexels-photo-678654.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="" /></li>
162
+
163
+ <li><img src="https://images.pexels.com/photos/1415555/pexels-photo-1415555.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="" /></li>
164
+
165
+ </ul>
166
+
167
+ </div>
168
+
169
+ </div>
170
+
171
+
172
+
173
+ <script>
174
+
175
+ $('#timeimg').slick({
176
+
177
+ arrows:false,
178
+
179
+ slidesToShow:1,
180
+
181
+ slidesToScroll:1,
182
+
183
+ autoplay:true,
184
+
185
+ autoplaySpeed:5000,
186
+
187
+ speed:10000
188
+
189
+ });
190
+
191
+ </script>
192
+
193
+
194
+
195
+ </body>
196
+
197
+ </html>
198
+
199
+
200
+
201
+ ```

3

追記

2019/04/30 06:47

投稿

wataame
wataame

スコア302

test CHANGED
@@ -1,4 +1,12 @@
1
1
  slick.jsのオプションを下記のようにすればできるかと思います。
2
+
3
+
4
+
5
+ 画像のくりぬきのように見える箇所はcssのmask-imageでオリジナルの画像を読み込ませています。
6
+
7
+ (その中をslick.jsの画像がスライドしています。)
8
+
9
+ ![イメージ説明](4d634795e59816d9078a5ac23111e021.jpeg)
2
10
 
3
11
 
4
12
 

2

修正

2019/04/29 10:14

投稿

wataame
wataame

スコア302

test CHANGED
@@ -16,10 +16,20 @@
16
16
 
17
17
  <script>
18
18
 
19
- ...
19
+ $('#timeimg').slick({
20
20
 
21
- speed: 10000,
21
+ arrows:false,
22
22
 
23
+ slidesToShow:1,
24
+
25
+ slidesToScroll:1,
26
+
27
+ autoplay:true,
28
+
29
+ autoplaySpeed:5000,
30
+
31
+ speed:10000
32
+
23
- ...
33
+ });
24
34
 
25
35
  </script>

1

修正

2019/04/29 09:47

投稿

wataame
wataame

スコア302

test CHANGED
@@ -8,11 +8,9 @@
8
8
 
9
9
  画像がスライド後=autoplay: true,// 自動再生
10
10
 
11
- ゆっくり移動=speed: 800, //スライドスピード
11
+ ゆっくり移動=speed: 10000, //スライドスピード
12
12
 
13
13
 
14
-
15
- あとはドットや矢印を消すオプションを書けば綺麗になると思います。。
16
14
 
17
15
 
18
16
 
@@ -20,9 +18,7 @@
20
18
 
21
19
  ...
22
20
 
23
- autoplay: true,// 自動再生
24
-
25
- speed: 3000,
21
+ speed: 10000,
26
22
 
27
23
  ...
28
24