A carousel (or slider) is a great way to display a series of images or content, one at a time. You can use buttons to navigate through them. Let's take a look at how you can build a simple carousel using React.
import { useEffect, useState } from 'react';
import { shortList, list, longList } from '../data';
import { FaQuoteRight } from 'react-icons/fa';
import { FiChevronLeft, FiChevronRight } from 'react-icons/fi';
const Carousel = () => {
const [people, setPeople] = useState(longList);
const [currentPersonIndex, setCurrentPersonIndex] = useState(0);
const prevSlide = () => {
// const prevIndex =
// currentPersonIndex === 0 ? people.length - 1 : currentPersonIndex - 1;
// setCurrentPersonIndex(prevIndex);
setCurrentPersonIndex((oldIndex) => {
const newIndex = (oldIndex - 1 + people.length) % people.length;
return newIndex;
});
};
const nextSlide = () => {
// const nextIndex =
// currentPersonIndex === people.length - 1 ? 0 : currentPersonIndex + 1;
// setCurrentPersonIndex(nextIndex);
setCurrentPersonIndex((oldIndex) => {
const newIndex = (oldIndex + 1) % people.length;
return newIndex;
});
};
useEffect(() => {
const sliderId = setInterval(() => {
nextSlide();
}, 2000);
return () => {
clearInterval(sliderId);
};
}, [currentPersonIndex]);
return (
<section className='slider-container'>
{people.map((person, personIndex) => {
const { id, name, image, title, quote } = person;
return (
<article
key={id}
className='slide'
style={{
transform: `translateX(${
100 * (personIndex - currentPersonIndex)
}%)`,
opacity: personIndex === currentPersonIndex ? 1 : 0,
visibility:
personIndex === currentPersonIndex ? 'visible' : 'hidden',
}}
>
<img src={image} alt={name} className='person-img' />
<h5 className='name'>{name}</h5>
<p className='title'>{title}</p>
<p className='text'>{quote}</p>
<FaQuoteRight className='icon' />
</article>
);
})}
<button type='button' className='prev' onClick={prevSlide}>
<FiChevronLeft />
</button>
<button type='button' className='next' onClick={nextSlide}>
<FiChevronRight />
</button>
</section>
);
};
export default Carousel;
Explanation of the Functions: nextSlide and prevSlide
1. nextSlide Function:
The nextSlide function moves the carousel to the next person in the list.
const nextSlide = () => {
setCurrentPersonIndex((oldIndex) => {
const newIndex = (oldIndex + 1) % people.length;
return newIndex;
});
};
How it works:
- The function first looks at the current person’s index, which is stored in
currentPersonIndex. - It then adds 1 to this index (
oldIndex + 1) to go to the next person. -
The
% people.lengthis used to ensure that when the index reaches the end of the list (e.g., at the last person), it wraps around to the first person again.- For example, if you are at the last person (index 4) and press "next", it will wrap back to person 0 (the first person).
Example:
- If
currentPersonIndex = 3(person 4), thenoldIndex + 1 = 4. But, because the list has 5 people (indexes 0 to 4), using% 5gives us4 % 5 = 0, which means it will go back to the first person.
2. prevSlide Function:
The prevSlide function moves the carousel to the previous person in the list.
const prevSlide = () => {
setCurrentPersonIndex((oldIndex) => {
const newIndex = (oldIndex - 1 + people.length) % people.length;
return newIndex;
});
};
How it works:
- The function first looks at the current person’s index, stored in
currentPersonIndex. - It then subtracts 1 from this index (
oldIndex - 1) to go to the previous person. -
The addition of
people.lengthensures that if the index goes below 0 (e.g., when we are at the first person and want to go back), it wraps around to the last person.- For example, if you are at the first person (index 0) and press "prev", it will wrap back to the last person (index 4).
Example:
- If
currentPersonIndex = 0(person 1), thenoldIndex - 1 = -1. Addingpeople.lengthgives us-1 + 5 = 4. When we apply% 5, we get4 % 5 = 4, which takes us to the last person.
Key Points to Remember:
-
% people.lengthis what makes the carousel wrap around: going from the first to the last person, and vice versa. - The
prevSlidefunction subtracts 1 to go backward, whilenextSlideadds 1 to go forward. - Both functions update the
currentPersonIndex, which determines which person is shown in the carousel.
SOCIAL SHARE CARD GENERATOR