I have a component that is similar to a carousel, only I'm just clicking through using React Hooks. I have a full-width image with a left and a right click arrow. (I only have the right arrow click for now. Also not worrying about conditionals just yet.)
- I am setting the images in the useState
- Setting the default image to be the 0 index of the state values.
let indexValue = 0; // Initial slide index value
let currentSlide = slides[indexValue];
Image, alt, and title display properly, cool.
- Created a right arrow click function that's supposed to update the image.
const arrowRightClick = () => {
currentSlide = slides[indexValue + 1];
console.log(currentSlide);
}
When I click on the right arrow, the console log does indeed display the next image, img2.jpg, however, the image itself never updates.
??? What am I doing wrong?
I feel like I have to do useEffect somewhere.
I've tried this(doesn't work):
useEffect(() => {
function changeSliderImage(currentSlide) {
setSlides(currentSlide.setSlides);
}
return () => {
<img src={currentSlide.source} alt={currentSlide.title} title={currentSlide.title} className="slider-img" />
}
}, [])
I feel like it's close to something like the previous code, but I'm not sure.
Full code below:
import React, { useState, useEffect } from 'react';
function Carousel() {
const [slides, setSlides] = useState([
{
source: "../images/img1.jpg",
title: "Half Moon Pier"
},
{
source: "../images/img2.jpg",
title: "Port Washington Rocks"
},
{
source: "../images/img3.jpg",
title: "Abandoned Rail"
}
]);
let indexValue = 0; // Initial slide index value
let currentSlide = slides[indexValue]; // variable index value we can reference later
// Index value moves up, but doesn't update the image. Why???
const arrowRightClick = () => {
currentSlide = slides[indexValue + 1];
console.log(currentSlide);
}
return (
<div className="carousel-block">
<div className="flex-container">
<div id="slider">
<div className="slide">
<img src={currentSlide.source} alt={currentSlide.title} title={currentSlide.title} className="slider-img" />
<div className="arrows">
<div id="arrow-left"><i className="fas fa-arrow-alt-circle-left"></i></div>
<div id="arrow-right" onClick={arrowRightClick}><i className="fas fa-arrow-alt-circle-right"></i></div>
</div>
</div>
</div>
</div>
</div>
)
}
export default Carousel;
Any help would be appreciated
Top comments (1)
For those who might come across this later, I figured out my own problem.
import React, { useState } from 'react';
But because it's React, we want the images to be dynamic, so we should opt for something like this:
Because we want to change something, we need another variable to act as our indexer(currentPosition). I had issues when setting this to const, so even though though React Docs use const, the variable is changing, so I changed it to let to get past the error of setting it to const.
currentPosition is my indexer
currentslide is all of my information inside each index of the slides variable object.
With this, the first image should display on the page. (That is assuming your image paths are correct. I might try hard-coding an image tag just to see that you have the correct path)
We add arrows. (I'm adding arrows from fontawesome inside of div tags.)
This is actually a ternary operator.
We are asking for a boolean condition
I've been taught put the more complex stuff first because it's less likely to hit.
We are starting out at 0 as our index, but we have to make up for after we get past the last image.
If the current position is not at the last image,
If that's true (not at the last image, img3.jpg in this case)
increase our index by 1, we're also doing this by running our setCurrentPosition we set earlier.
If the case is false, (Is at the last image, img3.jpg)
go back to the first image, or the 0 index.
Now update the slide with the following:
Here is the left click below, which really does the same thing, conditionals are just slightly different.
This doesn't have the CSS attached, but I think you can change it to however you would like.
Here's the full code: