From e36146b8cff2ddec6380399469344b62a5cfa944 Mon Sep 17 00:00:00 2001 From: Noam Kassoff Date: Sat, 21 Dec 2024 23:55:08 -0800 Subject: [PATCH 1/2] Made carousel multiple items --- package-lock.json | 9 +++++ package.json | 1 + src/components/Carousel.tsx | 80 +++++++++++++++++++++++++++++-------- src/index.css | 23 ++--------- 4 files changed, 78 insertions(+), 35 deletions(-) diff --git a/package-lock.json b/package-lock.json index ea77a2f..d0cc0da 100644 --- a/package-lock.json +++ b/package-lock.json @@ -24,6 +24,7 @@ "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" @@ -14949,6 +14950,14 @@ "integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==", "license": "MIT" }, + "node_modules/react-multi-carousel": { + "version": "2.8.5", + "resolved": "https://registry.npmjs.org/react-multi-carousel/-/react-multi-carousel-2.8.5.tgz", + "integrity": "sha512-C5DAvJkfzR2JK9YixZ3oyF9x6R4LW6nzTpIXrl9Oujxi4uqP9SzVVCjl+JLM3tSdqdjAx/oWZK3dTVBSR73Q+w==", + "engines": { + "node": ">=8" + } + }, "node_modules/react-refresh": { "version": "0.11.0", "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz", diff --git a/package.json b/package.json index 3d31d98..f73ee94 100644 --- a/package.json +++ b/package.json @@ -19,6 +19,7 @@ "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" diff --git a/src/components/Carousel.tsx b/src/components/Carousel.tsx index e2138d4..3f418c9 100644 --- a/src/components/Carousel.tsx +++ b/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 = ( - -
-
-
-
-
- -); +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 ( +
+ + {images.map((image, index) => ( +
+ {image.alt} +
+ ))} + +
+ ); } + +export default ImageCarousel; diff --git a/src/index.css b/src/index.css index 79324b9..d3d6ae9 100644 --- a/src/index.css +++ b/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; } @@ -77,4 +60,6 @@ code { padding-right: 40px; padding-bottom: 20px; -} \ No newline at end of file +} + + From c8c170f7ad2db0e2a0b8b51387c9829bda9fdd69 Mon Sep 17 00:00:00 2001 From: Noam Kassoff Date: Sat, 21 Dec 2024 23:57:13 -0800 Subject: [PATCH 2/2] Uninstalled react-awesome-slider --- package-lock.json | 15 --------------- package.json | 1 - 2 files changed, 16 deletions(-) diff --git a/package-lock.json b/package-lock.json index d0cc0da..15480d6 100644 --- a/package-lock.json +++ b/package-lock.json @@ -22,7 +22,6 @@ "@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", @@ -14812,14 +14811,6 @@ "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==", "license": "MIT" }, - "node_modules/react-awesome-slider": { - "version": "4.1.0", - "resolved": "https://registry.npmjs.org/react-awesome-slider/-/react-awesome-slider-4.1.0.tgz", - "integrity": "sha512-cbPI1MTpVLKbEH6gf9bwtJb8Ja6R/YJonKbUQehfq2B2AAJkgDMeHntaa4SgGCRqWd55xKiT+CkjfKau1QRsKw==", - "dependencies": { - "web-animation-club": "^0.6.0" - } - }, "node_modules/react-dev-utils": { "version": "12.0.1", "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-12.0.1.tgz", @@ -17664,12 +17655,6 @@ "minimalistic-assert": "^1.0.0" } }, - "node_modules/web-animation-club": { - "version": "0.6.0", - "resolved": "https://registry.npmjs.org/web-animation-club/-/web-animation-club-0.6.0.tgz", - "integrity": "sha512-9W+EQu1HiaPLe/7WZlhJ2ULqQ4VL80RPDYW+ZcjfTKp6ayOuT1k3SVO6+tu0VBRmOqueJ/mrG+rjjInIv8Aglg==", - "deprecated": "WARNING: This project has been renamed to @rcaferati/wac; install it using @rcaferati/wac instead." - }, "node_modules/web-vitals": { "version": "2.1.4", "resolved": "https://registry.npmjs.org/web-vitals/-/web-vitals-2.1.4.tgz", diff --git a/package.json b/package.json index f73ee94..052e2ae 100644 --- a/package.json +++ b/package.json @@ -17,7 +17,6 @@ "@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",