Merge pull request #60 from lakshayb121/lakshayb121/GOSW12

Added event slideshow

Author: nanda-mik

client/package-lock.json

@@ -14,8 +14,10 @@
     "aos": "^3.0.0-beta.6",
     "bootstrap": "^4.5.3",
     "cra-template": "1.0.3",
+    "infinite-react-carousel": "^1.2.11",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
+    "react-responsive-carousel": "^3.2.10",
     "react-scripts": "3.4.1",
     "redux": "^4.0.5",
     "styled-components": "^5.2.0"

client/package.json

@@ -14,4 +14,4 @@ function App() {
     </>
   );
 }
-export default App;
+export default App;

client/src/App.js

@@ -18,4 +18,4 @@ function HomePage() {
   );
 }
 
-export default HomePage;
+export default HomePage;

client/src/components/Homepage/Homepage.jsx

@@ -0,0 +1,35 @@
+import React from "react";
+import "react-responsive-carousel/lib/styles/carousel.min.css";
+import { Carousel } from 'react-responsive-carousel';
+
+export default function CarouselComponent() {
+    return (
+        <div class="carousel-wrapper">
+            
+            <Carousel infiniteLoop width="100%" useKeyboardArrows autoPlay>
+                <div>
+                    
+                    <img src="https://images.pexels.com/photos/5255412/pexels-photo-5255412.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=640&w=426" />
+                </div>
+                <div>
+                    <img src="https://images.pexels.com/photos/4857726/pexels-photo-4857726.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" />
+                </div>
+                <div>
+                    <img src="https://images.pexels.com/photos/5324749/pexels-photo-5324749.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" />
+                </div>
+                <div>
+                    <img src="https://images.pexels.com/photos/5463564/pexels-photo-5463564.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" />
+                </div>
+                <div>
+                    <img src="https://images.pexels.com/photos/3951628/pexels-photo-3951628.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" />
+                </div>
+                <div>
+                    <img src="https://images.pexels.com/photos/3746279/pexels-photo-3746279.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" />
+                </div>
+                <div>
+                    <img src="https://images.pexels.com/photos/5022494/pexels-photo-5022494.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" />
+                </div>
+            </Carousel>
+        </div>
+    );
+}