时间戳

首页 > 解决方案 > 如何向图像滑块中的导航点添加功能？

javascript - 如何向图像滑块中的导航点添加功能？

问题描述

目前我的导航点没有任何功能。我该如何添加。这是我的代码：

import React, { useEffect, useState, useRef } from "react";
import {Container,ButtonP, ButtonN,IMG, 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';


function Slider() {
  const [currentSlide, setCurrentSlide] = useState(0);
  const slideRef = useRef(null);
  
  const TOTAL_SLIDES = 4;
  const image = [
    {
      src : img1,
      title: "Welcome to Minter!",
      para: "Minter is the dApp for OKS holders. If you've never used Minter before, read through our quick introduction first."
    },
    {
      src : img2, 
      title: "What is Oikos?",
      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."
    },
    {
      src : img3, 
      title: "Why stake OKS?",
      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."
    },
    {
      src : img4, title: "What do OKS stakers need to do?",
      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."
    },
    {
      src : img5, title: "What are the risks?",
      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."
    }
  ];
  

  const nextSlide = () => {
      if (currentSlide >= TOTAL_SLIDES) { 
        setCurrentSlide(0);
      } else {
        setCurrentSlide(currentSlide + 1);
      }
    };

  const prevSlide = () => {
    if (currentSlide === 0) {
      setCurrentSlide(TOTAL_SLIDES);
    } else {
      setCurrentSlide(currentSlide - 1);
    }
  };

  useEffect(() => {
    slideRef.current.style.transition = "all 0.5s ease-in-out";
    slideRef.current.style.transform = `translateX(-${currentSlide}00%)`; 
    
  }, [currentSlide]);

 

return (
  
  <Container>
  
  <SliderContainer ref={slideRef}>
  
  {image.map(image => (
    <div>
      <h1 className="title">{image.title}</h1>
      <p className="para">{image.para}</p>
      <IMG src={image.src} key={image} />
      
    </div>
  ))}
  </SliderContainer>
    
  <div class="dot-container">
  <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>
  </div>

  <div className="combuttons">
  <ButtonP onClick={prevSlide}>
    <span className="previous"><h2>PREVIOUS</h2></span></ButtonP>
    <div class="divider"/>  
      <ButtonN onClick={nextSlide}><span className="nextbut"><h2>NEXT</h2></span></ButtonN>
      </div>
</Container>
  );
}

export default Slider;

这是我的页面的外观：

上一个和下一个按钮工作正常。它是我无法添加功能的点。任何帮助，将不胜感激。由于我使用数组来显示图像导航点的列表方式不起作用。我还希望这些点显示我当前在哪张幻灯片上..我也该怎么做。请帮忙

标签： javascripthtmlcssreactjs

解决方案

你可以这样使用：

<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>

但是为了避免过多的重复跨度标签，我建议使用这种方式；

此外，如果您为每个图像使用 id，则可以使用 insted of index （更好的方法）

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

推荐阅读