質問編集履歴
1
CSS追記
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -179,4 +179,43 @@
|
|
|
179
179
|
</script>
|
|
180
180
|
</body>
|
|
181
181
|
</html>
|
|
182
|
+
```
|
|
183
|
+
|
|
184
|
+
```css
|
|
185
|
+
|
|
186
|
+
.slider-wrap {
|
|
187
|
+
width: 600px;
|
|
188
|
+
padding: 10px;
|
|
189
|
+
margin: 0 auto;
|
|
190
|
+
border-radius: 10px;
|
|
191
|
+
background-color: #DDD;
|
|
192
|
+
box-shadow: 0 2px 5px rgba(50, 50, 50, 0.4);
|
|
193
|
+
}
|
|
194
|
+
.slider-area {
|
|
195
|
+
position: relative;
|
|
196
|
+
width: 600px;
|
|
197
|
+
height: 300px;
|
|
198
|
+
background-color: #FFF;
|
|
199
|
+
overflow: hidden;
|
|
200
|
+
}
|
|
201
|
+
.slider-list {
|
|
202
|
+
position: absolute;
|
|
203
|
+
top: 0;
|
|
204
|
+
left: 0;
|
|
205
|
+
width: 2400px;
|
|
206
|
+
height: 300px;
|
|
207
|
+
}
|
|
208
|
+
.slider-list > li { float: left; }
|
|
209
|
+
.slider-ctrl-btn {
|
|
210
|
+
position: absolute;
|
|
211
|
+
top: 50%;
|
|
212
|
+
width: 30px;
|
|
213
|
+
height: 30px;
|
|
214
|
+
margin-top: -15px;
|
|
215
|
+
cursor: pointer;
|
|
216
|
+
border-radius: 15px;
|
|
217
|
+
background-color: rgba(255, 255, 255, 0.5);
|
|
218
|
+
}
|
|
219
|
+
.slider-ctrl-btn.prev { left: 30px; }
|
|
220
|
+
.slider-ctrl-btn.next { right: 30px; }
|
|
182
221
|
```
|