Skip to content

slider change without requesting for image #2

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Shorifpatwary wants to merge 1 commit into
base: main
Choose a base branch
from
+94 −79
Open

slider change without requesting for image #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
node_modules
package-lock.json
58 changes: 29 additions & 29 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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"
]
}
41 changes: 21 additions & 20 deletions src/components/Slider.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
);
Copy link
Author

@Shorifpatwary Shorifpatwary Dec 30, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

show and hide sliders changing CSS value, instead of changing the src attribute value.

Copy link
Author

@Shorifpatwary Shorifpatwary Jan 4, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

demo https://codesandbox.io/s/musing-wright-x92utv?file=/src/components/Slider.jsx

};
export default Slider;
72 changes: 42 additions & 30 deletions src/styles.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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%
}