Блог

слайд 1
скольжение2

Я не знаю, как это объяснить … но изображение с одного слайда отображается и на следующем слайде. Пожалуйста, помогите… Я должен клонировать страницу oikos minter, любая помощь будет признательна.

вот код для index.js

 import React, { useEffect, useState, useRef } from "react";
import {Container,SliderContainer,ButtonP, ButtonN,IMG } from './slider';
import './slider.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 images = [
    {
      src : img1,
      description: "Image One"
    },
    {
      src : img2, description: "Image Two"
    },
    {
      src : img3, description: "Image Three"
    },
    {
      src : img4, description: "Image Four"
    },
    {
      src : img5, description: "Image Five"
    }
  ];
  

  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}>
      
      {images.map(image => (
        <div>
          <h1 className="description">{image.description}</h1>
          <IMG src={image.src} key={image} />
          
        </div>
      ))}
      </SliderContainer>
      <ButtonP onClick={prevSlide}><h2>PREVIOUS</h2></ButtonP>
      
      <ButtonN onClick={nextSlide}><h2>NEXT</h2></ButtonN>
    </Container>
  );
}

export default Slider; 
 

Это тот самый slide.js код:

 
export const IMG = styled.img `
  width: 399px;
  height: 200px;
  position:center;
  display: inline-block;
`;

export const Container = styled.div `
  width: 70%;
  overflow: hidden;
    height:100%;
    padding-top: 20%;
    padding-left:20%;
    displya: flex;
`;
export const ButtonP = styled.button `
  all: unset;
  width: "100px";
  height: "30px";
  border: 2px solid skyblue ;
  position:left;
  padding-right: 50px;
  justify-content: space-between;
  color: #727cff;
  border-radius: 5px;
  amp;:hover {
    transition: all 0.3s ease-in-out;
    background-color: #727cff;
    color: #fff;
  }
`;

export const ButtonN = styled.button `
  all: unset;
  width: "100px";
  height: "30px";
  border: 2px solid skyblue;
  position:right;
  padding-left: 50px;
  color: #727cff;
  border-radius: 5px;
  amp;:hover {
    transition: all 0.3s ease-in-out;
    background-color: #727cff;
    color: #fff;
  }
`;


export const SliderContainer = styled.div `
  width: 100%;
  display: inline-flex;
`;
 

Я не знаю, что не так в коде или почему он отображается так