React flexbox 元素不适应宽度

Question

我正在尝试创建幻灯片轮播，几乎完成了，但我在调整图像箭头时遇到了问题。

当检查网站是否响应时，flexbox 内的 div 停止收缩并停留在一个位置。看起来没问题，因为有溢出：隐藏。问题在于箭头，它们保持在相同的位置，所以它们消失了。

我的问题是调整它们，所以当网站以较小的分辨率显示时，仍然有可能改变幻灯片。

希望我已经详细解释了。

css:

    .header{
    display: flex;
    position: relative;
    justify-content: center;
    align-items: center;
    flex-basis: 100%;
    height: 40vh;
    border-color: white;
    overflow: hidden;
}

.header__box{
}

.right-arrow{ 
position: relative;
bottom: 350px;
left: 900px;
 font-size: 2rem;
 color: #000;
 z-index: 10;
 cursor: pointer;
 user-select: none;
}

.left-arrow{
    position: relative;
    bottom: 350px;
    left: 80px;
    font-size: 2rem;
    color: #000;
    z-index: 10;
    cursor: pointer;
    user-select: none;
}

.slide{
    opacity: 0;
    transition-duration: 1s;
    transform: scale(1.00);
}

.slide.active{
    display: flex;
    flex-basis: 100%;
    opacity: 1;
    transition-duration: 1s;
    transform: scale(1.00);
}

.image{
}

代码：

import React, {useState} from 'react';
import './Header.css';
import {HeaderData} from './HeaderData'
import {FaArrowAltCircleRight, FaArrowAltCircleLeft} from 'react-icons/fa'

const Header = ({slides}) => {
    const [current, setCurrent] = useState(0)
    const length = slides.length

    const nextSlide = () => {
        setCurrent(current === length - 1 ? 0 : current + 1)
    }

    const prevSlide = () => {
        setCurrent(current === 0? length -1 : current -1 )
    }

    console.log(current)

    return (
    <div className='header'> 
        <div className='header__box'>
            {HeaderData.map((slide, index) => {
                    return (
                        <div className={index === current? 'slide active' : 'slide'}>
                            {index === current ? <img src={slide.image} className='image' alt='shoe photo'/> : null}
                        </div>
                        
                    )
            })}
             <FaArrowAltCircleLeft className='left-arrow' onClick={prevSlide}/>
            <FaArrowAltCircleRight className='right-arrow' onClick={nextSlide}/>   
            </div>
    </div>
    )
}

export default Header; 

Answer 1

我想你想做这样的事情：

.header {
  display: flex;
  justify-content: center;
  height: 40vh;
  border-color: white;
  overflow: hidden;
}

.header__box {
  display: flex;
  align-items: center;
}

.right-arrow,
.left-arrow {
  font-size: 2rem;
  cursor: pointer;
  user-select: none;
}

.slide {
  opacity: 0;
  transition-duration: 1s;
  transform: scale(1);
}

.slide.active {
  opacity: 1;
  transition-duration: 1s;
  transform: scale(1);
}

img.image {
  padding: 10px;
}

还有这个：

const Header = ({ slides }) => {
  const [current, setCurrent] = useState(0);
  const length = slides.length
  const HeaderData = [{ image: test }, { image: foto }, { image: foto2 }];

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

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

  return (
    <div className="header">
      <div className="header__box">
        <FaArrowAltCircleLeft className="left-arrow" onClick={prevSlide} />
        {HeaderData.map((slide, index) => {
          return (
            <div className={index === current ? "slide active" : "slide"}>
              {index === current ? (
                <img src={slide.image} className="image" alt="shoe photo" />
              ) : null}
            </div>
          );
        })}
        <FaArrowAltCircleRight className="right-arrow" onClick={nextSlide} />
      </div>
    </div>
  );
};

---

所以上面的想法是将幻灯片放在左右箭头之间。 所以这部分代码如上图所示：

<div className="header__box">
  <FaArrowAltCircleLeft className="left-arrow" onClick={prevSlide} />
  {HeaderData.map((slide, index) => {
    return (
      <div className={index === current ? "slide active" : "slide"}>
        {index === current ? (
          <img src={slide.image} className="image" alt="shoe photo" />
        ) : null}
      </div>
    );
  })}
  <FaArrowAltCircleRight className="right-arrow" onClick={nextSlide} />
</div>

这让我们可以在幻灯片和箭头周围的.header__box div 上应用display: flex。这使得箭头的定位更容易。最重要的部分是在.header__box上也设置了align-items: center，所以箭头分别放在容器的中间。

Sandbox Example