Initial commit

Shorifpatwary · Jun 2, 2021 · 48bf587 · 48bf587
1 parent 08dce02
commit 48bf587
Show file tree

Hide file tree

Showing 8 changed files with 210 additions and 0 deletions.
diff --git a/.codesandbox/workspace.json b/.codesandbox/workspace.json
@@ -0,0 +1,20 @@
+{
+  "responsive-preview": {
+    "Mobile": [
+      320,
+      675
+    ],
+    "Tablet": [
+      1024,
+      765
+    ],
+    "Desktop": [
+      1400,
+      800
+    ],
+    "Desktop  HD": [
+      1920,
+      1080
+    ]
+  }
+}
diff --git a/package.json b/package.json
@@ -0,0 +1,30 @@
+{
+  "name": "carousel2",
+  "version": "1.0.0",
+  "description": "",
+  "keywords": [],
+  "main": "src/index.js",
+  "dependencies": {
+    "react": "17.0.2",
+    "react-dom": "17.0.2",
+    "react-icons": "4.2.0",
+    "react-scripts": "4.0.0",
+    "sass": "1.34.0"
+  },
+  "devDependencies": {
+    "@babel/runtime": "7.13.8",
+    "typescript": "4.1.3"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  },
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not ie <= 11",
+    "not op_mini all"
+  ]
+}
diff --git a/public/index.html b/public/index.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+	<meta name="theme-color" content="#000000">
+	<!--
+      manifest.json provides metadata used when your web app is added to the
+      homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
+    -->
+	<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
+	<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+	<!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+	<title>React App</title>
+</head>
+
+<body>
+	<noscript>
+		You need to enable JavaScript to run this app.
+	</noscript>
+	<div id="root"></div>
+	<!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+</body>
+
+</html>
diff --git a/src/App.js b/src/App.js
@@ -0,0 +1,10 @@
+import Slider from "./components/Slider";
+import "./styles.scss";
+
+export default function App() {
+   return (
+      <div className="App">
+         <Slider />
+      </div>
+   );
+}
diff --git a/src/components/SlideData.js b/src/components/SlideData.js
@@ -0,0 +1,27 @@
+export default data = [
+   {
+      image:
+         "https://images.pexels.com/photos/3836292/pexels-photo-3836292.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500"
+   },
+   {
+      image:
+         "https://images.pexels.com/photos/2792157/pexels-photo-2792157.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500"
+   },
+   {
+      image:
+         "https://images.pexels.com/photos/1166209/pexels-photo-1166209.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500"
+   },
+   {
+      image:
+         "https://images.pexels.com/photos/1661179/pexels-photo-1661179.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500"
+   },
+   {
+      image:
+         "https://images.pexels.com/photos/45201/kitty-cat-kitten-pet-45201.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500"
+   },
+
+   {
+      image:
+         "https://images.pexels.com/photos/36715/pigeon-flight-twig.jpg?auto=compress&cs=tinysrgb&dpr=2&w=500"
+   }
+];
diff --git a/src/components/Slider.jsx b/src/components/Slider.jsx
@@ -0,0 +1,29 @@
+import "../styles.scss";
+import { FaArrowAltCircleRight, FaArrowAltCircleLeft } from "react-icons/fa";
+import { useState } from "react";
+import data from "./SlideData";
+const Slider = () => {
+   const [current, setCurrent] = useState(0);
+
+   const nextSlide = () => {
+      setCurrent(current === data.length - 1 ? 0 : current + 1);
+   };
+   const prevSlide = () => {
+      setCurrent(current === 0 ? data.length - 1 : current - 1);
+   };
+
+   return (
+      <div className="slider">
+         <FaArrowAltCircleLeft className="left-arrow" onClick={prevSlide} />
+         <FaArrowAltCircleRight className="right-arrow" onClick={nextSlide} />
+         {data.map((d, index) => {
+            return current === index ? (
+               <div key={index} className="slide">
+                  <img src={d.image} alt="images" />
+               </div>
+            ) : null;
+         })}
+      </div>
+   );
+};
+export default Slider;
diff --git a/src/index.js b/src/index.js
@@ -0,0 +1,12 @@
+import { StrictMode } from "react";
+import ReactDOM from "react-dom";
+
+import App from "./App";
+
+const rootElement = document.getElementById("root");
+ReactDOM.render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+  rootElement
+);
diff --git a/src/styles.scss b/src/styles.scss
@@ -0,0 +1,39 @@
+.App {
+   font-family: sans-serif;
+   text-align: center;
+}
+.slider {
+   position: relative;
+   height: 100vh;
+   width: 100%;
+   box-sizing: border-box;
+   display: flex;
+   justify-content: center;
+   align-items: center;
+   margin:0;
+   padding: 0;
+
+
+}
+.slide{
+   min-width: 50%;
+   height: 60vh;;
+   font-size: 50px;
+}
+img{
+   width: 100%;
+   height: 100%;
+   object-fit: contain;
+}
+.left-arrow,.right-arrow{
+   position: absolute;
+   z-index: 1;
+   font-size: 30px;
+   top: 50%;
+}
+.left-arrow{
+   left:5%;
+}
+.right-arrow{
+   right:5%
+}