Spaces:
Sleeping
Sleeping
| <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> | |