How Do I Add Functionality To My Nav Dots In My Image Slider?

Currently my nav dots do not have any functionality. How do i add that. This is my code: The previous and next buttons are working fine. Its the dots that i am unable to add func

Solution 1:

you can use this way:

<div class="dot-container">
  <span class="dot" onClick={() => setCurrentSlide(0)}></span>
  <span class="dot" onClick={() => setCurrentSlide(1)}></span>
  <span class="dot" onClick={() => setCurrentSlide(2)}></span>
  <span class="dot" onClick={() => setCurrentSlide(3)}></span>
  <span class="dot" onClick={() => setCurrentSlide(4)}></span>
</div>

But To avoid excessive repetition span tag I recommand to use this way;

Also if you use id for each image, its can be use insted of index (better way)

 <div class="dot-container">
  {image.map((s,index) => {
       return (
          <span className={index === currentSlide ? "dot red" : "dot white"} onClick={() => setCurrent(index)}></span>
       )
   })}
 </div>

Solution 2:

Change the following:

<span class="dot" onClick={() => currentSlide(0)}></span>
<span class="dot" onClick={() => currentSlide(1)}></span>
<span class="dot" onClick={() => currentSlide(2)}></span>
<span class="dot" onClick={() => currentSlide(3)}></span>
<span class="dot" onClick={() => currentSlide(4)}></span>

Or wrap your span in a styled button.

Solution 3:

Isn't it a string that you're trying to give on your onClick ? Instead of this:

<span class="dot" onclick="currentSlide(0)"></span>

Maybe try this:

<span className="dot" onClick={() => setCurrentSlide(0)}></span>