-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
60 lines (53 loc) · 3.02 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Practice tailwindcss in slider component</title>
<link rel="stylesheet" href="./build/styles.css">
</head>
<body>
<section class="bg-gray-900 flex justify-center items-center min-h-screen">
<!-- slider container -->
<div class="relative h-96 w-full max-w-4xl overflow-x-hidden">
<!-- slide 1 -->
<div class="absolute top-0 w-full h-96 flex items-center justify-center transition-opacity duration-1000 ease-out opacity-100"
data-all>
<img class="w-full h-full object-cover" src="//unsplash.it/2900" alt="" />
</div>
<!-- slide 2 -->
<div class="absolute top-0 w-full h-96 flex items-center justify-center transition-opacity duration-1000 ease-out opacity-100"
data-all>
<img class="w-full h-full object-cover" src="//unsplash.it/1910" alt="" />
</div>
<!-- slide 3 -->
<div class="absolute top-0 w-full h-96 flex items-center justify-center transition-opacity duration-1000 ease-out opacity-100"
data-all>
<img class="w-full h-full object-cover" src="//unsplash.it/1400" alt="" />
</div>
<!-- buttons left and right -->
<button id="left"
class="absolute w-10 h-10 ml-2 md:ml-10 cursor-pointer font-bold text-black hover:text-white rounded-full bg-white hover:bg-blue-700 leading-tight text-center z-10 top-48 left-0 my-auto flex items-center justify-center">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd"
d="M9.707 16.707a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414l6-6a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l4.293 4.293a1 1 0 010 1.414z"
clip-rule="evenodd"></path>
</svg>
</button>
<button id="right"
class="absolute w-10 h-10 mr-2 md:mr-10 cursor-pointer font-bold text-black hover:text-white rounded-full bg-white hover:bg-blue-700 leading-tight text-center z-10 top-48 right-0 my-auto flex items-center justify-center">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd"
d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"
clip-rule="evenodd"></path>
</svg>
</button>
<!-- dots -->
<div id="dots" class="absolute bottom-0 left-1/2 transform -translate-x-1/2 pb-4">
<div class="dots__dot hidden dots__dot--active"></div>
</div>
</div>
</section>
<script src="main.js"></script>
</body>
</html>