Carousel not working even though Javascript is Correct:
I am creating a portfolio and one of the features I've provided is a carousel where you can scroll through my monthly music rotation. I have defined the function for the forward and prev buttons the result is I'm not getting a response but the console is reading it. Here's my code below:
Function for animation
<div className='w-full h-auto flex gap-72 justify-center'>
<button onClick={handlePrev} className='w-8 h-8 hover:bg-white/20 rounded-full flex items-center justify-center transition ease-in duration-800 animate-carousel-left'><FontAwesomeIcon icon={faChevronLeft} style={{color: "#ffffff", fontSize: '16px'}} /></button>
<button onClick={handleForward} className='w-8 h-8 hover:bg-white/20 rounded-full flex items-center justify-center transition ease-in duration-800 animate-carousel-right'><FontAwesomeIcon icon={faChevronRight} style={{color: "#ffffff", fontSize: '16px'}} /></button>
</div>
<div className='w-full h-auto flex gap-72 justify-center'>
<button onClick={handlePrev} className='w-8 h-8 hover:bg-white/20 rounded-full flex items-center justify-center transition ease-in duration-800 animate-carousel-left'><FontAwesomeIcon icon={faChevronLeft} style={{color: "#ffffff", fontSize: '16px'}} /></button>
<button onClick={handleForward} className='w-8 h-8 hover:bg-white/20 rounded-full flex items-center justify-center transition ease-in duration-800 animate-carousel-right'><FontAwesomeIcon icon={faChevronRight} style={{color: "#ffffff", fontSize: '16px'}} /></button>
</div>
const [currentIndex, setCurrentIndex] = useState(0);
const sounds = [
"https://embed.music.apple.com/us/album/in-between-and-overseas/1607100188?i=1607101242",
"https://embed.music.apple.com/us/album/orange-village/1677236538?i=1677236904",
"https://embed.music.apple.com/us/album/dreams-money-can-buy/1475177816?i=1475177817",
"https://embed.music.apple.com/us/album/goyard-umbrella/1677198478?i=1677198491",
"https://embed.music.apple.com/us/album/louis-baggage-feat-babyface-ray/1609125563?i=1609126175",
"https://embed.music.apple.com/us/album/east-liberty/1662164512?i=1662164513",
"https://embed.music.apple.com/us/album/ive-been-daydreaming-my-entire-life/1243853548?i=1243853559",
];
// Defining Back and Forth Functions
const handlePrev = () => {
setCurrentIndex((currentIndex - 1 + sounds.length) % sounds.length);
}
const handleForward = () => {
setCurrentIndex((currentIndex + 1) % sounds.length);
}
const [currentIndex, setCurrentIndex] = useState(0);
const sounds = [
"https://embed.music.apple.com/us/album/in-between-and-overseas/1607100188?i=1607101242",
"https://embed.music.apple.com/us/album/orange-village/1677236538?i=1677236904",
"https://embed.music.apple.com/us/album/dreams-money-can-buy/1475177816?i=1475177817",
"https://embed.music.apple.com/us/album/goyard-umbrella/1677198478?i=1677198491",
"https://embed.music.apple.com/us/album/louis-baggage-feat-babyface-ray/1609125563?i=1609126175",
"https://embed.music.apple.com/us/album/east-liberty/1662164512?i=1662164513",
"https://embed.music.apple.com/us/album/ive-been-daydreaming-my-entire-life/1243853548?i=1243853559",
];
// Defining Back and Forth Functions
const handlePrev = () => {
setCurrentIndex((currentIndex - 1 + sounds.length) % sounds.length);
}
const handleForward = () => {
setCurrentIndex((currentIndex + 1) % sounds.length);
}
1 Reply
is this all your code? A live example really helps too