React轮播组件单页图片部分显示在其他幻灯片故障求助

问题根因与修复方案 #

轮播出现相邻幻灯片内容露出的问题，由以下几处代码错误导致，修复后即可正常显示：

错误点汇总

• 轮播子项未设置固定宽度：SliderContainer 内部包裹每个幻灯片的div没有宽度限制，导致单个幻灯片无法占满父容器可视区域，多张幻灯片会同时挤在可视范围内，出现内容重叠露出。
• 存在多处无效CSS代码：Container 样式中displya: flex拼写错误（正确为display），position:center、position:left、position:right均为无效属性值，position属性不存在这类取值，直接导致布局逻辑失效。
• 列表渲染key属性使用错误：map循环渲染幻灯片时，key属性绑定在了IMG标签上，应该绑定在循环的最外层根节点，且不能直接用image对象作为key值，需要使用唯一标识。
• 图片固定宽度无法适配容器：IMG设置了固定399px宽度，无法适配轮播容器的动态尺寸，容易出现宽度不匹配导致的内容溢出。

修复后的代码

1. slider.js 修复后代码

import styled from 'styled-components'

export const IMG = styled.img `
  width: 100%;
  height: 200px;
  object-fit: contain;
  display: block;
  margin: 0 auto;
`;

export const Container = styled.div `
  width: 70%;
  overflow: hidden;
  height: 100%;
  padding-top: 20%;
  padding-left: 20%;
  display: flex;
  flex-direction: column;
  gap: 20px;
`;

export const ButtonGroup = styled.div`
  display: flex;
  justify-content: space-between;
  width: 100%;
`

export const ButtonP = styled.button `
  all: unset;
  width: 100px;
  height: 30px;
  border: 2px solid skyblue;
  padding: 0 20px;
  text-align: center;
  color: #727cff;
  border-radius: 5px;
  cursor: pointer;
  &: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;
  padding: 0 20px;
  text-align: center;
  color: #727cff;
  border-radius: 5px;
  cursor: pointer;
  &:hover {
    transition: all 0.3s ease-in-out;
    background-color: #727cff;
    color: #fff;
  }
`;

export const SliderContainer = styled.div `
  width: 100%;
  display: inline-flex;
  > div {
    flex-shrink: 0;
    width: 100%;
  }
`;

2. index.js 修复后代码

import React, { useEffect, useState, useRef } from "react";
import {Container,SliderContainer,ButtonP, ButtonN,IMG, ButtonGroup } 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, index) => (
        <div key={index}>
          <h1 className="description">{image.description}</h1>
          <IMG src={image.src} />
          
        </div>
      ))}
      </SliderContainer>
      <ButtonGroup>
        <ButtonP onClick={prevSlide}><h2>PREVIOUS</h2></ButtonP>
        <ButtonN onClick={nextSlide}><h2>NEXT</h2></ButtonN>
      </ButtonGroup>
    </Container>
  );
}

export default Slider; 

额外优化说明

新增了ButtonGroup容器用来包裹两个切换按钮，解决了原来按钮排版错位的问题，你可以根据自己的需求调整容器的padding、宽度等样式参数。

内容的提问来源于stack exchange，提问作者user16659888