How do i add next and previous buttons to my react slideshow website

Question

This is an image slider using react. How do i add these previous and next buttons to it.? i have already added the dot navigation but i am not able to add the buttons . Can someone please write me the code for the buttons?

This is my code

import React from 'react';
import {SliderContainer} from './sliderElements';
import './sliderEle.css';

import img1 from '../../images/slider1.png';
import img2 from '../../images/slider2.png';
import img3 from '../../images/slider3.png';
import img4 from '../../images/slider4.png';
import img5 from '../../images/slider5.png';

const Slider = () => {
    
    return (
        <>
    <SliderContainer>
      <ul className="slides">
        <input type="radio" name="radio-btn" id="img-1" checked />
        <li className="slide-container">
          <div className="slide">
            <h1 className="title">Welcome to Minter!</h1>
            <p className="para">Minter is the dApp for OKS holders. If you've never used Minter before, read through our quick introduction first.</p>
            <img src={img1} alt="" height="198.45px" width="540.15px" />
          </div>
      
          <div className="nav">
            <label for="img-5" className="prev"></label>
            <label for="img-2" className="next"></label>
          </div>
        </li>

        <input type="radio" name="radio-btn" id="img-2" />
        <li className="slide-container">
          <div className="slide">
          <h1 className="title">What is Oikos?</h1>
            <p className="para">Oikos is a decentralised synthetic asset issuance protocol built on Binance Smart Chain. These synthetic assets (Synths) are created by staking the Oikos Network Token (OKS), and these Synths can be exchanged for each other directly with the Oikos smart contracts on Oikos.Exchange.</p>
            <img src={img2} alt="" height="198.45px" width="540.15px" />
          </div>
          <div className="nav">
            <label for="img-1" className="prev"></label>
            <label for="img-3" className="next"></label>
          </div>
        </li>

        <input type="radio" name="radio-btn" id="img-3" />
          <li className="slide-container">
            <div className="slide">
              <h1 className="title">Why stake OKS?</h1>
              <p className="para">OKS stakers receive two kinds of rewards. Firstly, they receive OKS staking rewards, which are created through the inflationary monetary policy. Secondly, there’s Synth exchange rewards, which are generated by Synth trades on Oikos.Exchange.</p>
              <img src={img3}  alt="" height="198.45px" width="540.15px"/>
            </div>
            <div className="nav">
              <label for="img-2" className="prev"></label>
              <label for="img-4" className="next"></label>
            </div>
          </li>

          <input type="radio" name="radio-btn" id="img-4" checked />
            <li className="slide-container">
            <div className="slide">
                <h1 className="title">What do OKS stakers need to do?</h1>
                <p className="para">All Synths need to be backed by staked OKS at a Collateralisation Ratio of 750%. OKS stakers need to manage their own ratio to be above this figure, which they can do by burning Synths to increase their ratio or minting Synths to reduce it. If they do this, they can collect weekly rewards.</p>
                <img src={img4} alt="" height="198.45px" width="540.15px" />
             </div>
      
            <div className="nav">
            <label for="img-3" className="prev"></label>
            <label for="img-5" className="next"></label>
            </div>
            </li>

        <input type="radio" name="radio-btn" id="img-5" checked />
            <li className="slide-container">
            <div className="slide">
              <h1 className="title">What are the risks?</h1>
              <p className="para">All OKS stakers create a ‘debt’ when they stake. Their debt begins as the amount of oUSD they initially mint, and fluctuates according to gains or losses made by other Synth holders. Any time anyone holds a Synth that appreciates in value, that gain is distributed proportionally between all the staked OKS holders’ debts. A staker must pay off their debt before they can unlock their staked OKS.</p>
                <img src={img5} alt="" height="198.45px" width="540.15px" />
             </div>
      
          <div className="nav">
            <label for="img-4" className="prev"></label>
            <label for="img-1" className="next"></label>
          </div>
        </li>

          <li className="nav-dots">
            <label for="img-1" className="nav-dot" id="img-dot-1"></label>
            <label for="img-2" className="nav-dot" id="img-dot-2"></label>
            <label for="img-3" className="nav-dot" id="img-dot-3"></label>
            <label for="img-4" className="nav-dot" id="img-dot-4"></label>
            <label for="img-5" className="nav-dot" id="img-dot-5"></label>
          </li>
          <div>
            <label for ="prev" className="prev">Previous</label>
            <label for ="next" className="next">Next</label>
          </div>
      </ul>
      
    </SliderContainer>
    </>

    )
}

export default Slider;

.slides {
    padding: 0;
    width: 700px;
    height: 500px;
    display: block;
    margin: 0 auto;
    position: relative;
}

.slides * {
    user-select: none;
    -ms-user-select: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

.slides input {
    display: none;
}

.slide-container {
    display: block;
}

.slide {
    top: 0;
    opacity: 0;
    width: 700px;
    height: 500px;
    display: block;
    position: absolute;
    /*transform: scale(0);*/
    transform: translate(1, 0);
    transition: all .7s ease-in-out;
}

.slide img {
    margin-left: 10%;
    margin-top: 20px;
    text-align: center;
    display: block;
    position: absolute;
}

.title {
    text-align: center;
    color: rgb(252, 249, 249);
    font-size: 32px;
}

.para {
    font-size: 20px;
    text-align: center;
    color: #9594ae;
}

.nav label {
    width: 40px;
    /*height: 60px;*/
    height: 100%;
    display: none;
    position: absolute;
    /*margin: auto;*/
    opacity: 0;
    z-index: 9;
    cursor: pointer;
    transition: opacity .2s;
    color: #FFF;
    font-size: 40pt;
    text-align: center;
    line-height: 380px;
    font-family: "Arial", sans-serif;
    background-color: rgba(255, 255, 255, 0);
    text-shadow: 0px 0px 15px rgb(119, 119, 119);
}

.slide:hover+.nav label {
    opacity: 0.5;
}

.nav label:hover {
    opacity: 1;
}

input:checked+.slide-container .slide {
    opacity: 1;
    /*transform: scale(1);*/
    /*transform: translate();*/
    /*transform: scale(2,3);*/
    transition: opacity 1s ease-in-out;
}

input:checked+.slide-container .nav label {
    display: block;
}

.nav-dots {
    width: 100%;
    bottom: 5px;
    height: 5px;
    display: block;
    position: absolute;
    text-align: center;
}

.nav-dots .nav-dot {
    top: -5px;
    width: 11px;
    height: 11px;
    margin: 0 7px;
    position: relative;
    border-radius: 100%;
    display: inline-block;
    background-color: #FFF;
}

.nav-dots .nav-dot:hover {
    cursor: pointer;
    background-color: #FFF;
}

input#img-1:checked~.nav-dots label#img-dot-1,
input#img-2:checked~.nav-dots label#img-dot-2,
input#img-3:checked~.nav-dots label#img-dot-3,
input#img-4:checked~.nav-dots label#img-dot-4,
input#img-5:checked~.nav-dots label#img-dot-5 {
    background: #727cff;
}

How do i add these buttons? I have searched it everywhere but i shows using an array But that is not possible. can someone please help me with the code for that?

Answer 1

you can do this:

for ImageData component:

export const ImageData = [
    {
        title: "Welcome to Minter!",
        body: "Minter is the dApp for OKS holders. If you've never used 
                Minter before, read through our quick introduction first.",
        image: 'https://images.unsplash.com/photo-1627842468152-62f95538037a?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80'
    },
 // and other datas
]

and in Slider component:

 {ImageData.map( (slide,index) => {
      returtn (
          <div className="slide">
             <h1 className="title"> {slide.title} </h1>
             <p className="para"> {slide.body} </p>
             { index === current && <img src={slide.image} alt="images" />}
         </div> )
}

Answer 2

I think you can do another and a better way for your slider. For the first create a component and save your data(photo) in there, name it: ImageData

then import it to your main component

import {ImageData} from './ImageData';

then you can use this codes:

const [current, setCurrent] = useState(0);
const length = ImageData.length;

    function nextSlide() {
        setCurrent( current === length - 1 ? 0 : current + 1 );
    }

    function prevSlide() {
        setCurrent( current === 0 ? length - 1 : current - 1 );
    }

and for buttons you can use onClick:

<button onClick={prevSlide}></button>
<button onClick={nextSlide}></button>

Also for showing your images you should use map() method...

{ImageData.map((slide,index) => {
     return (
       { index === current && <img src={slide.image} alt="images" />}
            )
})}