如何制作一个简单的 React 轮播

2025-06-07

如何制作一个简单的 React 轮播

轮播通常用于任何想要使用图像来展示其产品重点的网站，但轮播不仅可以包含图像，还可以包含具有任何内容的卡片。

为了实现轮播，人们通常使用诸如react-responsive-carousel，pure-react-carousel之类的包。但是如果你不想在应用程序中添加其他包怎么办？

那我们就做一个简单的吧！

在本文中，我将指导您如何制作一个简单的 React 轮播，当然您可以根据自己的需求进行调整。我还会在 GitHub 上添加我已完成项目的链接。

先决条件

如果您已经准备好项目，请跳过此步骤。

您需要安装Node.js，如果您已经安装了 Node.js，让我们创建一个新的 React 应用程序。



npx create-react-app my-app
cd my-app
npm run start
Enter fullscreen mode Exit fullscreen mode

之后，您需要使用您选择的 IDE 打开项目文件夹，我使用的是VS Code。

创建新组件

在您的组件文件夹中创建一个名为Carousel的新文件夹（我通常将其放在src/components/Carousel中）。

创建一个名为Carousel.js的新文件并打开它。

之后，让我们先从基本组件文件开始，将此代码复制到您的文件中。

Carousel.js



import React from 'react'


const Carousel = () => {
    return (
        <div>

        </div>
    )
}

export default Carousel
Enter fullscreen mode Exit fullscreen mode

将此组件添加到您的页面

创建组件后，我们需要将其导入到将要使用的页面上，为了演示目的，我将把它放在我的 App.js 上。

App.js



import Carousel from "./components/Carousel/Carousel"

const App = () => {
    return (
        <div>
            <Carousel>

            </Carousel>
        </div>
    )
}

export default App
Enter fullscreen mode Exit fullscreen mode

现在我们可以看到我们对 Carousel 组件所做的更改。

创建轮播

让我们回到Carousel.js文件并添加更多 HTML 和一些样式。

Carousel.js



import React from 'react'
import './carousel.css' //will be added later

const Carousel = (props) => {
    const {children} = props

    return (
        <div className="carousel-container">
            <div className="carousel-wrapper">
                <div className="carousel-content-wrapper">
                    <div className="carousel-content">
                        {children}
                    </div>
                </div>
            </div>
        </div>
    )
}

export default Carousel
Enter fullscreen mode Exit fullscreen mode

我们向名为children的组件添加了一个 prop ，它是将在 Carousel 上显示的内容。
下一步是创建一个 css 文件，用于设置 Carousel 组件的样式。让我们在Carousel.js所在的目录中创建一个名为carousel.css的文件。

轮播.css



.carousel-container {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.carousel-wrapper {
    display: flex;
    width: 100%;
    position: relative;
}

.carousel-content-wrapper {
    overflow: hidden;
    width: 100%;
    height: 100%;
}

.carousel-content {
    display: flex;
    transition: all 250ms linear;
    -ms-overflow-style: none;  /* hide scrollbar in IE and Edge */
    scrollbar-width: none;  /* hide scrollbar in Firefox */
}

/* hide scrollbar in webkit browser */
.carousel-content::-webkit-scrollbar, .carousel-content::-webkit-scrollbar {
    display: none;
}

.carousel-content > * {
    width: 100%;
    flex-shrink: 0;
    flex-grow: 1;
}
Enter fullscreen mode Exit fullscreen mode

接下来，我们将内容添加到轮播中。我将使用placeholder.com提供的占位符图片。

App.js



// ...
<Carousel>
    <img src="https://via.placeholder.com/1600x300" alt="placeholder" />
    <img src="https://via.placeholder.com/1600x300" alt="placeholder" />
    <img src="https://via.placeholder.com/1600x300" alt="placeholder" />
</Carousel>
// ...
Enter fullscreen mode Exit fullscreen mode

为了演示目的，我向App.js上的父 div 添加了一些样式。

App.js



// ...
<div style={{ maxWidth: 1200, marginLeft: 'auto', marginRight: 'auto', marginTop: 64 }}>
    { /*...*/ }
</div>
// ...
Enter fullscreen mode Exit fullscreen mode

结果应该如下所示。如您所见，只有 1 张图片可见，并且不可滚动。

1

添加控件（布局）

下一步是添加控件，以便用户能够与其交互。目前我们只添加上一个和下一个按钮。我将在下一篇文章中详细讨论其他控件。

Carousel.js



// ...
<div className="carousel-wrapper">
    {/* You can alwas change the content of the button to other things */}
    <button className="left-arrow">
        &lt;
    </button>
    <div className="carousel-content-wrapper">
        { /*...*/ }
    </div>
    {/* You can alwas change the content of the button to other things */}
    <button className="right-arrow">
        &gt;
    </button>
</div>
// ...
Enter fullscreen mode Exit fullscreen mode

轮播.css



/* ... */
.left-arrow, .right-arrow {
    position: absolute;
    z-index: 1;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    border-radius: 24px;
    background-color: white;
    border: 1px solid #ddd;
}

.left-arrow {
    left: 24px;
}

.right-arrow {
    right: 24px;
}
/* ... */
Enter fullscreen mode Exit fullscreen mode

我们已经完成了 Carousel 控件的基本布局。接下来我们需要添加 JavaScript 代码来处理按钮的点击和隐藏。

添加控制（功能）

为了使 Carousel 控件可用，我们需要为当前活动索引（currentIndex）和传递给 Carousel 的总项目（length）定义一个状态。

Carousel.js



// ...
const [currentIndex, setCurrentIndex] = useState(0)
const [length, setLength] = useState(children.length)

// Set the length to match current children from props
useEffect(() => {
    setLength(children.length)
}, [children])
// ...
Enter fullscreen mode Exit fullscreen mode

之后，我们给 carousel-content 添加一个 transform 样式，这个样式属性将用于处理 Carousel 的滚动。该属性将由 currentIndex 状态控制。

Carousel.js



// ...
<div className="carousel-content-wrapper">
    <div
        className="carousel-content"
        style={{ transform: `translateX(-${currentIndex * 100}%)` }}
    >
        {children}
    </div>
</div>
// ...
Enter fullscreen mode Exit fullscreen mode

接下来我们将添加一个函数来处理控制按钮被点击的情况。

Carousel.js



// ...
const next = () => {
    if (currentIndex < (length - 1)) {
        setCurrentIndex(prevState => prevState + 1)
    }
}

const prev = () => {
    if (currentIndex > 0) {
        setCurrentIndex(prevState => prevState - 1)
    }
}
// ...
Enter fullscreen mode Exit fullscreen mode

让我们将函数绑定到两个按钮上的 onClick 监听器。

Carousel.js



// ...
<button onClick={prev} className="left-arrow">
    &lt;
</button>
// ...
<button onClick={next} className="right-arrow">
    &gt;
</button>
// ...
Enter fullscreen mode Exit fullscreen mode

并且...它有效！

2

隐藏控制按钮

好的，这是需要做的最后一件事，即添加一个条件，在不需要时隐藏控制按钮（例如，当它当前位于第一张幻灯片时隐藏上一个按钮，当它当前位于最后一张幻灯片时隐藏下一个按钮）

Carousel.js




// ...

{

    currentIndex > 0 &&

    <button onClick={prev} className="left-arrow">

        &lt;

    </button>

}

// ...

{

    currentIndex < (length - 1) &&

    <button onClick={next} className="right-arrow">

        &gt;

    </button>

}

// ...
Enter fullscreen mode Exit fullscreen mode




我们完成了！

我们已经完成了一个简单的轮播图的创建。你可以在我的 Github上查看最终的完整代码。

希望这篇文章对你有用！
谢谢！

文章来源：https://dev.to/rakumairu/simple-react-carousel-24m0
Devto 翻译
PREV
免费托管和使用 Redis
NEXT
寻找黑客马拉松的 5 个最佳地点！🧑‍💻