Revert "Merge branch 'embla'"

This reverts commit 91b76c9, reversing
changes made to ffaca2c.

Author: coder8080

package.json

@@ -13,7 +13,6 @@
     "@solidjs/start": "^1.1.0",
     "@tailwindcss/vite": "^4.1.3",
     "atropos": "^2.0.2",
-    "embla-carousel-solid": "^8.6.0",
     "scrollreveal": "^4.0.9",
     "solid-js": "^1.9.5",
     "swiper": "10.3.1",

pnpm-lock.yaml

@@ -13,20 +13,26 @@ import GridRow from "~/shared/ui/GridRow"
 import ListItem from "~/shared/ui/ListItem"
 import Account from "~/shared/ui/Account"
 import PageTitle from "~/shared/ui/PageTitle"
-import createEmblaCarousel from "embla-carousel-solid"
 
 export default function Home() {
-  const [emblaRef, emblaApi] = createEmblaCarousel(() => ({
-    loop: true,
-    skipSnaps: true,
-  }))
-
   createEffect(() => {
     Atropos({
       el: ".atropos-img1",
       shadow: false,
       rotateTouch: "scroll-y",
     })
+
+    new Swiper(".swiper", {
+      modules: [Navigation],
+      loop: true,
+      slidesPerView: "auto",
+      centeredSlides: true,
+      lazyPreloadPrevNext: 2,
+      navigation: {
+        nextEl: ".swiper-button-next",
+        prevEl: ".swiper-button-prev",
+      },
+    })
   })
 
   const gridRows = createMemo(() => NFTS.slice(0, 4))
@@ -117,11 +123,11 @@ export default function Home() {
           <h2 class="font-[Poppins] text-[30px] lg:text-[32px] xl:text-[45px] text-[#c5c5c5] font-semibold">
             Weekly - Top NFT
           </h2>
-          <div class="embla mt-[60px] lg:mt-[70px] xl:mt-[100px] w-full transform-none overflow-hidden" ref={emblaRef}>
-            <div class="embla__container max-w-full transform-none flex flex-row select-none">
+          <div class="swiper mt-[60px] lg:mt-[70px] xl:mt-[100px] w-full transform-none">
+            <div class="swiper-wrapper max-w-full transform-none">
               <For each={NFTS}>
                 {(item) => (
-                  <div class="embla__slide min-w-[230px] max-w-[230px] xl:min-w-[320px] xl:max-w-[320px] px-[15px] xl:px-[20px]">
+                  <div class="swiper-slide flex flex-col max-w-[230px] xl:max-w-[320px] px-[15px] xl:px-[20px]">
                     <Card {...item} />
                   </div>
                 )}
@@ -131,7 +137,6 @@ export default function Home() {
               <button
                 class="swiper-button-prev flex flex-row items-center justify-center grow cursor-pointer"
                 aria-label="move left"
-                onClick={() => emblaApi()?.scrollPrev()}
               >
                 <img
                   loading="lazy"
@@ -143,7 +148,6 @@ export default function Home() {
               <button
                 class="swiper-button-next flex flex-row items-center justify-center grow cursor-pointer"
                 aria-label="move right"
-                onClick={() => emblaApi()?.scrollNext()}
               >
                 <img
                   loading="lazy"

src/routes/index.tsx

@@ -13,6 +13,7 @@ const Card = (props: Props) => {
           loading="lazy"
           alt={`NFT ${props.title}`}
         />
+        <div class="swiper-lazy-preloader"></div>
         <div class="absolute top-[10px] right-[8px] xl:top-[14px] xl:right-[10px] bg-[#1C1D2059]/65 rounded-lg xl:rounded-xl px-[10px] py-[6px] xl:px-[14px] xl:py-[8px] text-white text-[10px] xl:text-[14px] font-[Poppins] font-medium text-nowrap">
           {props.timer}
         </div>