-
Notifications
You must be signed in to change notification settings - Fork 0
/
test.html
82 lines (62 loc) · 3.33 KB
/
test.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
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
<!DOCTYPE html>
<html lang="en" class="h-full">
<head>
<meta charset="UTF-8">
<title>Test</title>
<!-- Tailwind CSS -->
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet"
href="node_modules/@splidejs/splide/dist/css/splide.min.css"/>
<!-- Splidebox -->
<script src="dist/js/splidebox.js"></script>
</head>
<body class="h-full">
<section class="flex flex-col items-center justify-center gap-4 h-full">
<div class="image relative cursor-pointer">
<img class="w-[250px] w-[250px] m-auto object-cover"
src="https://placehold.co/300x300"
alt="Image"/>
<svg class="fa-solid fa-expand w-[32px] h-[32px]
z-10 absolute bottom-2 right-2 text-xl"
style="fill: #54565A"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 448 512">
<!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
<path d="M32 32C14.3 32 0 46.3 0 64v96c0 17.7 14.3 32 32 32s32-14.3 32-32V96h64c17.7 0 32-14.3 32-32s-14.3-32-32-32H32zM64 352c0-17.7-14.3-32-32-32s-32 14.3-32 32v96c0 17.7 14.3 32 32 32h96c17.7 0 32-14.3 32-32s-14.3-32-32-32H64V352zM320 32c-17.7 0-32 14.3-32 32s14.3 32 32 32h64v64c0 17.7 14.3 32 32 32s32-14.3 32-32V64c0-17.7-14.3-32-32-32H320zM448 352c0-17.7-14.3-32-32-32s-32 14.3-32 32v64H320c-17.7 0-32 14.3-32 32s14.3 32 32 32h96c17.7 0 32-14.3 32-32V352z"/>
</svg>
</div>
<div class="image relative cursor-pointer"
data-splidebox-images='["https://placehold.co/100x100","https://placehold.co/150x150","https://placehold.co/200x200"]'>
<img class="w-[250px] w-[250px] m-auto object-cover"
src="https://placehold.co/300x300"
alt="Image"/>
<svg class="fa-solid fa-expand w-[32px] h-[32px]
z-10 absolute bottom-2 right-2 text-xl"
style="fill: #54565A"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 448 512">
<!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
<path d="M32 32C14.3 32 0 46.3 0 64v96c0 17.7 14.3 32 32 32s32-14.3 32-32V96h64c17.7 0 32-14.3 32-32s-14.3-32-32-32H32zM64 352c0-17.7-14.3-32-32-32s-32 14.3-32 32v96c0 17.7 14.3 32 32 32h96c17.7 0 32-14.3 32-32s-14.3-32-32-32H64V352zM320 32c-17.7 0-32 14.3-32 32s14.3 32 32 32h64v64c0 17.7 14.3 32 32 32s32-14.3 32-32V64c0-17.7-14.3-32-32-32H320zM448 352c0-17.7-14.3-32-32-32s-32 14.3-32 32v64H320c-17.7 0-32 14.3-32 32s14.3 32 32 32h96c17.7 0 32-14.3 32-32V352z"/>
</svg>
</div>
</section>
<section id="splidebox-container"></section>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', () => {
const lightboxWrapper = document.getElementById('splidebox-container');
let imageArray = [
'https://placehold.co/300x300',
'https://placehold.co/350x350',
'https://placehold.co/400x400',
]
lightboxWrapper.Splidebox({
openButtonSelector: '.image',
images: imageArray,
splideOptions: {
type: 'loop',
}
})
});
</script>
</body>
</html>