反应内容滑块

Question

我正在尝试在 React 中创建内容滑块，并且在某种程度上我已经成功，但是我希望内容水平移动而不是垂直移动。现在所有的项目都堆叠在一起，我知道这就是为什么它们不能作为水平滑块工作，最初我尝试使用 flexbox 来对齐彼此相邻的项目，但随后它们无法使用 left 移动或直接在 CSS 中。

我目前正在做的是将内部 div（其中包含项目）的顶部设置为计算出的像素数，以便它显示下一个“幻灯片”。我一直在尝试和失败的是尝试让项目彼此相邻，而不是顶部只是更改滑块的左/右以显示项目。

（P.S. 我没有添加一种方法来停止滑块超过项目总数，之后会这样做）

这是反应代码：

import React, { Component } from "react";
import "../App.css";

class Item extends Component {
  constructor(props) {
    super(props);
    this.state = {
      id: 1,
      top: "0px",
    };
  }

  onClickSlide = (_) => {
    const item = this.state.id;
    this.setState({ top: item * 200 * -1 + "px" });
    this.setState({ id: item + 1 });
  };

  render() {
    let dang = [
      { title: "Header 1", content: "Lorem ipsum proin gravida" },
      { title: "Header 2", content: "Lorem ipsum proin gravida" },
      { title: "Header 3", content: "Lorem ipsum proin gravida" },
      { title: "Header 4", content: "Lorem ipsum proin gravida" },
    ];

const item = this.state.id;
let innerStyle = {top: item * 200 * -1 + "px"};

return (
  <div className="Outer">
    
    <div className="inner" onClick={this.onClickSlide} style={{ top: this.state.top }}>
      {dang.map((data, i) => {
        return (
          <div className="items">
            <h3>{data.title}</h3>
            <h3>{data.content}</h3>
          </div>
        );
      })}
    </div>
  </div>
);
 }
}

export default Item;

这是 CSS：

.Outer {
  display: block;
  position: relative;
  overflow: hidden;
  width: 200px;
  height: 200px;
}

.inner {
  /* display: block; */
  position: absolute;
  transition: all 0.5s;
}

.items {
  display: inline-block;
  width: 200px;
  height: 200px;
  vertical-align: top;
}

Answer 1

很酷，所以通过一些测试和其他一些轮播示例，我构建了自己的版本。仍有改进的空间，但这是它的基础。这个想法是有一个超长的容器，所有的图像都可以彼此相邻，并通过使用 CSS 属性“translate”根据单击的方向向左或向右移动每个图像。

下面是 React JS 示例：

 export default () => {
  const [translate, setTranslate] = useState(0);

  const handleClickBtn= (direction) => {
    if (direction == "right") {
      setTranslate({ translate: translate - 100 });
    } else {
      setTranslate({ translate: translate + 100 });
    }
  };

  return (
    <div className="banner-carousel">
      <button
        className="carousel-button btn-left"
        onClick={(_) => handleClickBtn("left")}
      >
        Left
      </button>

      <div className="carousel-container">
          <div
            className="slide"
            style={{ transform: `translateX(${translate}vw)`}}
          >
            <img className="carousel-image" src="https://www.publicdomainpictures.net/pictures/40000/nahled/random-texture.jpg" />
          </div>

          <div
            className="slide"
            style={{ transform: `translateX(${translate}vw)`}}
          >
            <img className="carousel-image" src="https://www.publicdomainpictures.net/pictures/40000/nahled/random-texture.jpg"/>
          </div>

          <div
            className="slide"
            style={{ transform: `translateX(${translate}vw)`}}
          >
            <img className="carousel-image" src="https://www.publicdomainpictures.net/pictures/40000/nahled/random-texture.jpg"/>
          </div>
      </div>

      <button
        className="carousel-button btn-right"
        onClick={(_) => handleClickBtn("right")}
      >
        Right
      </button>
    </div>
  );
};

这里是 SCSS：

.banner-carousel {
  height: 720px;

  .carousel-button {
    cursor: pointer;
    position: absolute;
    top: 45%;
    color: #fff;
    z-index: 100;

    &.btn-left {
      left: 25px;
    }

    &.btn-right {
      right: 25px;
    }
  }

  .carousel-container {
    display: flex;
    width: 10000px;

    .slide {
      width: 100vw;
      height: 720px;
      transition: transform 0.25s linear; 

      .carousel-image {
        width: 100%;
      }
    }
  }
}

同样，这仍然需要改进，因此可能会在以后回来并更新。如果您有任何其他建议，请随时发布！