slider change without requesting for image

.gitignore

@@ -0,0 +1,2 @@
+node_modules
+package-lock.json

package.json

@@ -1,30 +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"
-  ]
-}
+	"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"
+	]
+}

src/components/Slider.jsx

@@ -3,27 +3,28 @@ import { FaArrowAltCircleRight, FaArrowAltCircleLeft } from "react-icons/fa";
 import { useState } from "react";
 import data from "./SlideData";
 const Slider = () => {
-   const [current, setCurrent] = useState(0);
+	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);
-   };
+	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>
-   );
+	return (
+		<div className="slider">
+			<FaArrowAltCircleLeft className="left-arrow" onClick={prevSlide} />
+			<FaArrowAltCircleRight className="right-arrow" onClick={nextSlide} />
+			{data.map((d, index) => (
+				<div
+					key={index}
+					className={index === current ? "slide slide__active" : "slide"}
+				>
+					<img src={d.image} alt="images" loading="lazy" />
+				</div>
+			))}
+		</div>
+	);
 };
 export default Slider;

src/styles.scss

@@ -1,39 +1,51 @@
 .App {
-   font-family: sans-serif;
-   text-align: center;
+	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;
-
+	position: relative;
+	height: 60vh;
+	width: 100%;
+	box-sizing: border-box;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	margin: 0;
+	padding: 0;
+}
+.slide {
+	position: absolute;
+	width: 100%;
+	height: 100%;
+	min-width: 50%;
+	font-size: 50px;
+	opacity: 0;
+	pointer-events: none;
+	transform: scale(0.8);
+	transition: 0.5s ease-in-out;
+}
 
+.slide__active {
+	opacity: 1;
+	transform: scale(1);
+	pointer-events: visible;
 }
-.slide{
-   min-width: 50%;
-   height: 60vh;;
-   font-size: 50px;
+img {
+	width: 100%;
+	height: 100%;
+	object-fit: cover;
 }
-img{
-   width: 100%;
-   height: 100%;
-   object-fit: contain;
+.left-arrow,
+.right-arrow {
+	position: absolute;
+	z-index: 1;
+	font-size: 30px;
+	top: 50%;
+	color: yellowgreen;
 }
-.left-arrow,.right-arrow{
-   position: absolute;
-   z-index: 1;
-   font-size: 30px;
-   top: 50%;
+.left-arrow {
+	left: 5%;
 }
-.left-arrow{
-   left:5%;
+.right-arrow {
+	right: 5%;
 }
-.right-arrow{
-   right:5%
-}