Merge pull request #14 from mvhacks/noam-carousel

Image Carousel

package.json

@@ -17,8 +17,10 @@
     "@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-scripts": "^5.0.1",
+    "sass": "^1.81.0",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

src/App.tsx

@@ -6,6 +6,7 @@ import Prospectus from "./components/Prospectus"
 import Faqs from "./components/Faqs";
 import Title from "./components/Title";
 import Schedule from "./components/Schedule";
+import Carousel from "./components/Carousel";
 
 function App() {
   const home = useRef(null);
@@ -51,6 +52,7 @@ function App() {
         </div>
         <div className="info" ref={info}>
           <h2>INFO</h2>
+          <Carousel></Carousel>
         </div>
         <div className="schedule" ref={schedule}>
           <Schedule></Schedule>

src/components/Carousel.tsx

@@ -0,0 +1,19 @@
+import AwesomeSlider from "react-awesome-slider";
+import "react-awesome-slider/dist/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>
+);
+
+export default function Carousel() {
+  return slider;
+}

src/index.css

@@ -12,7 +12,24 @@ 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;
 }