teratail header banner
teratail header banner
質問するログイン新規登録

質問編集履歴

1

CSS追記

2019/12/03 01:31

投稿

退会済みユーザー
title CHANGED
File without changes
body CHANGED
@@ -22,10 +22,10 @@
22
22
  <div class="slider-wrap">
23
23
  <div class="slider-area">
24
24
  <ul class="slider-list clearfix">
25
- <li><img src="img/1.jpg" alt=""></li>
26
- <li><img src="img/2.jpg" alt=""></li>
25
+ <li><img src="http://placehold.jp/150x150.png" alt=""></li>
26
+ <li><img src="http://placehold.jp/3d4070/ffffff/150x150.png" alt=""></li>
27
- <li><img src="img/3.jpg" alt=""></li>
27
+ <li><img src="http://placehold.jp/150x150.png" alt=""></li>
28
- <li><img src="img/4.jpg" alt=""></li>
28
+ <li><img src="http://placehold.jp/3d4070/ffffff/150x150.png" alt=""></li>
29
29
  </ul>
30
30
  <button type="button" class="slider-ctrl-btn prev" data-ctrl="prev"></button>
31
31
  <button type="button" class="slider-ctrl-btn next" data-ctrl="next"></button>
@@ -72,4 +72,42 @@
72
72
  </script>
73
73
  </body>
74
74
  </html>
75
+ ```
76
+
77
+ ```css
78
+ .slider-wrap {
79
+ width: 600px;
80
+ padding: 10px;
81
+ margin: 0 auto;
82
+ border-radius: 10px;
83
+ background-color: #DDD;
84
+ box-shadow: 0 2px 5px rgba(50, 50, 50, 0.4);
85
+ }
86
+ .slider-area {
87
+ position: relative;
88
+ width: 600px;
89
+ height: 300px;
90
+ background-color: #FFF;
91
+ overflow: hidden;
92
+ }
93
+ .slider-list {
94
+ position: absolute;
95
+ top: 0;
96
+ left: 0;
97
+ width: 2400px;
98
+ height: 300px;
99
+ }
100
+ .slider-list > li { float: left; }
101
+ .slider-ctrl-btn {
102
+ position: absolute;
103
+ top: 50%;
104
+ width: 30px;
105
+ height: 30px;
106
+ margin-top: -15px;
107
+ cursor: pointer;
108
+ border-radius: 15px;
109
+ background-color: rgba(255, 255, 255, 0.5);
110
+ }
111
+ .slider-ctrl-btn.prev { left: 30px; }
112
+ .slider-ctrl-btn.next { right: 30px; }
75
113
  ```