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:

<divclass="dot-container"><spanclass="dot"onClick={() => setCurrentSlide(0)}></span><spanclass="dot"onClick={() => setCurrentSlide(1)}></span><spanclass="dot"onClick={() => setCurrentSlide(2)}></span><spanclass="dot"onClick={() => setCurrentSlide(3)}></span><spanclass="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 (
          <spanclassName={index === currentSlide ? "dotred" : "dotwhite"} onClick={() => setCurrent(index)}></span>
       )
   })}
 </div>

Solution 2:

Change the following:

<spanclass="dot"onClick={() => currentSlide(0)}></span><spanclass="dot"onClick={() => currentSlide(1)}></span><spanclass="dot"onClick={() => currentSlide(2)}></span><spanclass="dot"onClick={() => currentSlide(3)}></span><spanclass="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:

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

Maybe try this:

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