final fix on carousel

devflowinc · Dec 18, 2024 · bcc8136 · bcc8136
1 parent d597705
commit bcc8136
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 3 deletions.
diff --git a/clients/search-component/src/TrieveModal/Chat/Carousel.tsx b/clients/search-component/src/TrieveModal/Chat/Carousel.tsx
@@ -82,17 +82,17 @@ export const Carousel = ({ children }: { children: React.ReactNode }) => {
   return (
     <div className="carousel-root">
       <ul className="carousel-scroll" ref={scrollRef}>
-        {allProductsCarousel.map((child, index) => child ? (
+        {allProductsCarousel.map((child, index) => (
           <li
-            className="carousel-item"
+            className={child ? "carousel-item carousel-item-visibile" : "carousel-item carousel-item-hidden"}
             style={{
               width: `calc(100% / ${itemsPerPage})`,
             }}
             key={index}
           >
             {child}
           </li>
-        ) : null)}
+        ))}
       </ul>
       {numPages > 1 && (
         <div className="carousel-controls">

diff --git a/clients/search-component/src/TrieveModal/index.css b/clients/search-component/src/TrieveModal/index.css
@@ -336,6 +336,14 @@ body {
           box-sizing: border-box;
         }
 
+        .carousel-item-hidden {
+          visibility: hidden;
+        }
+
+        .carousel-item-visibile {
+          visibility: visible;
+        }
+
         .carousel-controls {
           display: flex;
           justify-content: center;