Merge pull request #173 from istenith/footer-new

caraousel update
istenith · Aug 2, 2024 · d0d049b · d0d049b
2 parents 97a1210 + 205cd45
commit d0d049b
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 26 deletions.
diff --git a/public/home.css b/public/home.css
@@ -476,25 +476,39 @@
 
 /* Coursel CSS */
 .carousel-container {
-  width: 90%;
+  width: 80%;
+  margin: 0 auto;
   padding: 10px;
 }
 
 .carousel-wrapper {
+
   border-radius: 10px;
   padding: 2px;
-  box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.2);
+  box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.1);
 }
 
 .carousel-wrapper .carousel .slide {
   border-radius: 10px;
+  display: flex;
+  justify-content: center; 
 }
 
 .carousel-wrapper .carousel .slide img {
   border-radius: 10px;
   object-fit: cover;
 }
 
+.carousel-image-container {
+  display: flex;
+
+}
+
+.carousel-image {
+  max-width: 70%;
+  max-height: 100%;
+}
+
 .carousel .control-dots {
   display: none;
 }
diff --git a/src/components/homePageComponents/carousel.jsx b/src/components/homePageComponents/carousel.jsx
@@ -21,28 +21,28 @@ const ImageCarousel = () => {
     technexImage3,
   ];
 
-
-    return (
-      <div className="carousel-container">
-        <div className="carousel-wrapper">
-          <Carousel
-            showArrows={false}
-            showThumbs={false}
-            showStatus={false}
-            autoPlay={true}
-            interval={3000}
-            infiniteLoop={true}
-          >
-            {carouselImages.map((image, index) => (
-              <div key={index}>
-                <img src={image} alt={`img ${index + 1}`} />
-              </div>
-            ))}
-          </Carousel>
-        </div>
+  return (
+    <div className="carousel-container">
+      <div className="carousel-wrapper">
+        <Carousel
+          showArrows={false}
+          showThumbs={false}
+          showStatus={false}
+          autoPlay={true}
+          interval={3000}
+          infiniteLoop={true}
+          centerMode={false}
+          selectedItem={0}
+        >
+          {carouselImages.map((image, index) => (
+            <div key={index} className="carousel-image-container">
+              <img src={image} alt={`img ${index + 1}`} className="carousel-image" />
+            </div>
+          ))}
+        </Carousel>
       </div>
-    );
-  };
-  
-  export default ImageCarousel;
-  
+    </div>
+  );
+};
+
+export default ImageCarousel;