Adds more home page carousel products for wide screens (#1142)

vercel · Aug 4, 2023 · ef92d57 · ef92d57 · vercel · Aug 4, 2023
1 parent 0e13cfc
commit ef92d57
Showing 1 changed file with 4 additions and 1 deletion.
diff --git a/components/carousel.tsx b/components/carousel.tsx
@@ -8,10 +8,13 @@ export async function Carousel() {
 
   if (!products?.length) return null;
 
+  // Purposefully duplicating products to make the carousel loop and not run out of products on wide screens.
+  const carouselProducts = [...products, ...products, ...products];
+
   return (
     <div className=" w-full overflow-x-auto pb-6 pt-1">
       <ul className="flex animate-carousel gap-4">
-        {[...products, ...products].map((product, i) => (
+        {carouselProducts.map((product, i) => (
           <li
             key={`${product.handle}${i}`}
             className="relative aspect-square h-[30vh] max-h-[275px] w-2/3 max-w-[475px] flex-none md:w-1/3"