I've been working on enhancing my React skills and building my portfolio. Instead of using a library, I opted to create a custom slider using the code below:
const ProjectWrapper = styled.div`
.container {
transform: translateX(-${(props) => props.activeIndex * 200}px);
transition: transform 0.3s;
display: flex;
flex-direction: column;
margin: 20px;
border: 1px solid gray;
border-radius: 5px;
padding: 20px;
text-align: justify;
color: white;
text-decoration: none;
height: 450px;
}
`;
export default function Portfolio() {
const [activeIndex, setActiveIndex] = useState(0);
const updateIndex = (newIndex) => {
if (newIndex < 0) {
newIndex = projects.count - 1;
} else if (newIndex >= projects.count) {
newIndex = 0;
}
setActiveIndex(newIndex);
};
return (
<div>
<Arrow>
<ProjectWrapper activeIndex={activeIndex}>
{projects.map((el, idx) => {
return (
<a key={idx} className="container" href={el.url}>
<div>
<div className="img">
<img src={el.image} alt={el.title} />
</div>
<div className="row">
<h3 className="title">
{el.title}
<a target="_blank" href={el.github}>
{el.github === "" ? (
""
) : (
<i className="fa-brands fa-github fa-lg"></i>
)}
</a>
</h3>
<div className="desc">
<p>{el.description}</p>
</div>
<p>
<b>Technologies:</b> {el.resources}
</p>
</div>
</div>
</a>
);
})}
</ProjectWrapper>
<button
onClick={() => {
updateIndex(activeIndex - 1);
}}
>
{" "}
<i class="fa-solid fa-angle-left"></i>
</button>
<button
onClick={() => {
updateIndex(activeIndex + 1);
}}
>
<i class="fa-solid fa-angle-right"></i>
</button>
</Arrow>
</div>
);
}
Everything seems to be working well except for a couple of issues:
- Once the last card is displayed, I want the next arrow to be disabled.
- After navigating to the next card and then going back to the beginning, the next arrow is not clickable anymore. It only works again after refreshing the page.
Does anyone have any suggestions on how to improve my code to address these issues?