在 React 中创建滑动轮播展示组件

2023-10-24 11:35:00

在 React 中使用滑动轮播组件可以轻松创建交互式的幻灯片，非常适合展示产品图片、轮播广告等。在本文中，我们将介绍如何使用 React 开发一个滑动轮播组件，并提供一个完整的教程，帮助你轻松集成到你的项目中。

实现原理

该组件是一个展览列表的滑动轮播组件，通过左右按钮进行左右滑动，可以指定每次滑动移动的数量，以及指定展示多少行的内容。

创建组件

首先，我们创建一个新的 React 组件：

import React from "react";
import { useState } from "react";
import "./styles.css";

const Slider = () => {
  const [activeIndex, setActiveIndex] = useState(0);
  const [data, setData] = useState([
    { id: 1, title: "Image 1", description: "Description 1" },
    { id: 2, title: "Image 2", description: "Description 2" },
    { id: 3, title: "Image 3", description: "Description 3" },
    { id: 4, title: "Image 4", description: "Description 4" },
    { id: 5, title: "Image 5", description: "Description 5" },
  ]);

  const nextSlide = () => {
    if (activeIndex === data.length - 1) {
      setActiveIndex(0);
    } else {
      setActiveIndex(activeIndex + 1);
    }
  };

  const prevSlide = () => {
    if (activeIndex === 0) {
      setActiveIndex(data.length - 1);
    } else {
      setActiveIndex(activeIndex - 1);
    }
  };

  return (
    <div className="slider">
      {data.map((item, index) => {
        const active = index === activeIndex ? "active" : "";
        return (
          <div className={`slide ${active}`} key={item.id}>
            <img src={item.image} alt={item.title} />
            <div className="text">
              <h3>{item.title}</h3>
              <p>{item.description}</p>
            </div>
          </div>
        );
      })}
      <button className="prev" onClick={prevSlide}>
        <i className="fa fa-angle-left"></i>
      </button>
      <button className="next" onClick={nextSlide}>
        <i className="fa fa-angle-right"></i>
      </button>
    </div>
  );
};

export default Slider;

使用组件

接下来，在你的 React 项目中使用这个组件：

import Slider from "./Slider";

const App = () => {
  return (
    <div>
      <h1>滑动轮播组件</h1>
      <Slider />
    </div>
  );
};

export default App;

样式

最后，添加一些样式来美化组件：

.slider {
  width: 100%;
  height: 500px;
  overflow: hidden;
}

.slide {
  width: 100%;
  height: 100%;
  float: left;
  position: relative;
}

.slide.active {
  display: block;
}

.slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.text {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  padding: 20px;
}

.text h3 {
  margin-bottom: 10px;
  font-size: 24px;
}

.text p {
  font-size: 16px;
}

.prev,
.next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 50px;
  height: 50px;
  background-color: #fff;
  color: #000;
  border: 1px solid #000;
  border-radius: 50%;
  font-size: 24px;
  cursor: pointer;
}

.prev {
  left: 10px;
}

.next {
  right: 10px;
}