回答編集履歴

1

追記

2020/11/14 07:00

投稿

Jon_do
Jon_do

スコア1373

test CHANGED
@@ -13,3 +13,169 @@
13
13
  </body>
14
14
 
15
15
  ```
16
+
17
+
18
+
19
+ ```html
20
+
21
+ <!DOCTYPE html>
22
+
23
+ <html lang="ja">
24
+
25
+
26
+
27
+ <head>
28
+
29
+ <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
30
+
31
+ <link href='https://fonts.googleapis.com/css?family=Anton' rel='stylesheet' type='text/css'>
32
+
33
+ <link href='https://fonts.googleapis.com/css?family=Neucha' rel='stylesheet' type='text/css'>
34
+
35
+ <title>test</title>
36
+
37
+ </head>
38
+
39
+
40
+
41
+ <body>
42
+
43
+ <div id="wrapper">
44
+
45
+
46
+
47
+ <h1>Simple Image Slider</h1>
48
+
49
+ <h2>A Pen by <a href="http://www.andrecortellini.com" target="_blank">André Cortellini</a></h2>
50
+
51
+
52
+
53
+ <div id="slider-wrap">
54
+
55
+ <ul id="slider">
56
+
57
+ <li data-color="#1abc9c">
58
+
59
+ <div>
60
+
61
+ <h3>Slide #1</h3>
62
+
63
+ <span>Sub-title #1</span>
64
+
65
+ </div>
66
+
67
+ <i class="fa fa-image"></i>
68
+
69
+ </li>
70
+
71
+
72
+
73
+ <li data-color="#3498db">
74
+
75
+ <div>
76
+
77
+ <h3>Slide #2</h3>
78
+
79
+ <span>Sub-title #2</span>
80
+
81
+ </div>
82
+
83
+ <i class="fa fa-gears"></i>
84
+
85
+ </li>
86
+
87
+
88
+
89
+ <li data-color="#9b59b6">
90
+
91
+ <div>
92
+
93
+ <h3>Slide #3</h3>
94
+
95
+ <span>Sub-title #3</span>
96
+
97
+ </div>
98
+
99
+ <i class="fa fa-sliders"></i>
100
+
101
+ </li>
102
+
103
+
104
+
105
+ <li data-color="#34495e">
106
+
107
+ <div>
108
+
109
+ <h3>Slide #4</h3>
110
+
111
+ <span>Sub-title #4</span>
112
+
113
+ </div>
114
+
115
+ <i class="fa fa-code"></i>
116
+
117
+ </li>
118
+
119
+
120
+
121
+ <li data-color="#e74c3c">
122
+
123
+ <div>
124
+
125
+ <h3>Slide #5</h3>
126
+
127
+ <span>Sub-title #5</span>
128
+
129
+ </div>
130
+
131
+ <i class="fa fa-microphone-slash"></i>
132
+
133
+ </li>
134
+
135
+
136
+
137
+
138
+
139
+ </ul>
140
+
141
+
142
+
143
+ <!--controls-->
144
+
145
+ <div class="btns" id="next"><i class="fa fa-arrow-right"></i></div>
146
+
147
+ <div class="btns" id="previous"><i class="fa fa-arrow-left"></i></div>
148
+
149
+ <div id="counter"></div>
150
+
151
+
152
+
153
+ <div id="pagination-wrap">
154
+
155
+ <ul>
156
+
157
+ </ul>
158
+
159
+ </div>
160
+
161
+ <!--controls-->
162
+
163
+
164
+
165
+ </div>
166
+
167
+
168
+
169
+ </div>
170
+
171
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
172
+
173
+ <script src="script.js"></script>
174
+
175
+ </body>
176
+
177
+
178
+
179
+ </html>
180
+
181
+ ```