Hugging Face's logo

Spaces:
thejagstudio
/
Xenesis
Sleeping

App Files Community
Xenesis
File size: 2,628 Bytes 
05dddec
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.css" />
<title>Document</title>
<script src="./static/tailwind.js"></script>
</head>
<body>
<div class="swiper mySwiper h-screen w-screen">
	<div class="swiper-wrapper">
	<div class="swiper-slide w-[50%] h-[50%] flex justify-center items-center bg-[url('https://source.unsplash.com/random/900x900?sig=1')] bg-cover bg-center text-4xl text-white ">Slide 1</div>
	<div class="swiper-slide w-[50%] h-[50%] flex justify-center items-center bg-[url('https://source.unsplash.com/random/900x900?sig=2')] bg-cover bg-center text-4xl text-white ">Slide 2</div>
	<div class="swiper-slide w-[50%] h-[50%] flex justify-center items-center bg-[url('https://source.unsplash.com/random/900x900?sig=3')] bg-cover bg-center text-4xl text-white ">Slide 3</div>
	<div class="swiper-slide w-[50%] h-[50%] flex justify-center items-center bg-[url('https://source.unsplash.com/random/900x900?sig=4')] bg-cover bg-center text-4xl text-white ">Slide 4</div>
	<div class="swiper-slide w-[50%] h-[50%] flex justify-center items-center bg-[url('https://source.unsplash.com/random/900x900?sig=5')] bg-cover bg-center text-4xl text-white ">Slide 5</div>
	<div class="swiper-slide w-[50%] h-[50%] flex justify-center items-center bg-[url('https://source.unsplash.com/random/900x900?sig=6')] bg-cover bg-center text-4xl text-white ">Slide 6</div>
	<div class="swiper-slide w-[50%] h-[50%] flex justify-center items-center bg-[url('https://source.unsplash.com/random/900x900?sig=7')] bg-cover bg-center text-4xl text-white ">Slide 7</div>
	<div class="swiper-slide w-[50%] h-[50%] flex justify-center items-center bg-[url('https://source.unsplash.com/random/900x900?sig=8')] bg-cover bg-center text-4xl text-white ">Slide 8</div>
	<div class="swiper-slide w-[50%] h-[50%] flex justify-center items-center bg-[url('https://source.unsplash.com/random/900x900?sig=9')] bg-cover bg-center text-4xl text-white ">Slide 9</div>
	</div>
	<div class="swiper-pagination"></div>
</div>

<script src="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.js"></script>
<script>
	var swiper = new Swiper(".mySwiper", {
		effect: "coverflow",
		grabCursor: true,
		centeredSlides: true,
		slidesPerView: "auto",
		coverflowEffect: {
		rotate: 50,
		stretch: 0,
		depth: 100,
		modifier: 1,
		slideShadows: true,
		},
		pagination: {
		el: ".swiper-pagination",
		},
	});
	
</script>
</body>
</html>