Merge pull request #18 from mvhacks/noam-carousel

Made Carousel Show Multiple Images at Once

package.json

@@ -17,8 +17,8 @@
     "@types/react": "^18.3.11",
     "@types/react-dom": "^18.3.1",
     "react": "^18.3.1",
-    "react-awesome-slider": "^4.1.0",
     "react-dom": "^18.3.1",
+    "react-multi-carousel": "^2.8.5",
     "react-scripts": "^5.0.1",
     "sass": "^1.81.0",
     "web-vitals": "^2.1.4"

src/components/Carousel.tsx

@@ -1,19 +1,67 @@
-import AwesomeSlider from "react-awesome-slider";
-import "react-awesome-slider/dist/styles.css";
+import React from "react";
+import Carousel from "react-multi-carousel";
+import "react-multi-carousel/lib/styles.css";
 
-const slider = (
-  <AwesomeSlider
-    className="slider"
-    bullets={false} /*cssModule={AwesomeSliderStyles}*/
-  >
-    <div data-src="/presentation.jpg" />
-    <div data-src="/mrnguyen.jpg" />
-    <div data-src="/hackers.jpg" />
-    <div data-src="/food.jpg" />
-    <div data-src="/awards.jpg" />
-  </AwesomeSlider>
-);
+function ImageCarousel() {
+  const images = [
+    { src: "/presentation.jpg", alt: "Presentation" },
+    { src: "/mrnguyen.jpg", alt: "Mr. Nguyen" },
+    { src: "/hackers.jpg", alt: "Hackers" },
+    { src: "/food.jpg", alt: "Food" },
+    { src: "/awards.jpg", alt: "Awards" },
+  ];
 
-export default function Carousel() {
-  return slider;
+  const responsive = {
+    desktop: {
+      breakpoint: { max: 3000, min: 1024 },
+      items: 3,
+    },
+    tablet: {
+      breakpoint: { max: 1024, min: 464 },
+      items: 2,
+    },
+    mobile: {
+      breakpoint: { max: 464, min: 0 },
+      items: 1,
+    },
+  };
+
+  return (
+    <div style={{ margin: "0 auto", maxWidth: "1200px" }}>
+      <Carousel
+        responsive={responsive}
+        infinite
+        autoPlay
+        autoPlaySpeed={3000}
+        arrows
+        showDots={false}
+        swipeable
+        draggable
+        containerClass="carousel-container"
+      >
+        {images.map((image, index) => (
+          <div
+            key={index}
+            style={{
+              padding: "10px",
+              boxSizing: "border-box",
+              textAlign: "center",
+            }}
+          >
+            <img
+              src={image.src}
+              alt={image.alt}
+              style={{
+                width: "100%",
+                height: "auto",
+                borderRadius: "8px",
+              }}
+            />
+          </div>
+        ))}
+      </Carousel>
+    </div>
+  );
 }
+
+export default ImageCarousel;

src/index.css

@@ -12,24 +12,7 @@ code {
 	font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
 		monospace;
 }
-.slider {
-	width: 35% !important;
-	height: auto !important;
-	margin:auto !important;
-}
-.awssld {
-	--slider-height-percentage: 60% !important;
-	--slider-transition-duration: 225ms !important;
-	--organic-arrow-thickness: 10px !important;
-	--organic-arrow-border-radius: 0px !important;
-	--organic-arrow-height: 50px !important;
-	--organic-arrow-color: #ffffff !important;
-	--control-button-width: 10% !important;
-	--control-button-height: 25% !important;
-	--control-button-background: transparent !important;
-	--loader-bar-color: transparent !important;
-	--loader-bar-height: 1px !important;
-}
+
 #footer {
 	text-align: center;
 }
@@ -78,4 +61,6 @@ code {
 	padding-right: 10%;
 	padding-bottom: 20px;
 
-}
+}
+
+