For those who might come across this later, I figured out my own problem.
We are use state, so import React with useState:
import React, { useState } from 'react';
Create your main function that you will be exporting
function Carousel() {
}
OR *(If you're going by ES6)*
const Carousel = () => {
}
Inside the function, create your variable as an object (Not actually changing state, so we don't need a function to change anything.(Make sure your image paths are correct)
The above won't do anything yet, because currentSlide is not declared. Now we have to set defaults.
let [currentPosition, setCurrentPosition] = useState(0); // Initial slide index value
let currentSlide = slides[currentPosition]; // variable index value we can reference later
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)
Now that we have an image up, we want to be able to move from one to another. In our
)
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,
currentPosition !== slides.length -1
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.
setCurrentPosition(currentPosition + 1)
If the case is false, (Is at the last image, img3.jpg)
:
go back to the first image, or the 0 index.
setCurrentPosition(currentPosition = 0);
Now update the slide with the following:
currentSlide = slides[currentPosition];
Here is the left click below, which really does the same thing, conditionals are just slightly different.
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: