如何將下一個和上一個按鈕添加到我的 React 幻燈片網站

Question

這是一張使用 React 的圖像 slider。 我如何將這些上一個和下一個按鈕添加到它。？ 我已經添加了點導航，但無法添加按鈕。 有人可以給我寫按鈕的代碼嗎？

這是我的代碼

 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 m.netary 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; }

我如何添加這些按鈕？ 我到處搜索它，但我顯示使用數組但這是不可能的。 有人可以幫我解決這個問題嗎？

Answer 1

你可以這樣做：

對於 ImageData 組件：

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
]

在 Slider 組件中：

 {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

我認為您可以為您的 slider 做另一種更好的方法。首先創建一個組件並將數據（照片）保存在其中，將其命名為：ImageData

然后將其導入您的主要組件

import {ImageData} from './ImageData';

那么你可以使用這些代碼：

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 );
    }

對於按鈕，您可以使用 onClick：

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

同樣為了顯示您的圖像，您應該使用 map() 方法...

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