时间戳

首页 > 解决方案 > 如何创建图像轮播（不是常规类型） - css / react / npm

css - 如何创建图像轮播（不是常规类型） - css / react / npm

问题描述

我有一个图像列表，我需要它们每 2 秒向右移动一次（如图像），

我需要它是无限的轮播（有10张图像，当轮播到达最后一张图像时 - 从第一张重新开始）。

我如何使用 react & css / sass 来做到这一点？

你们知道任何 npm 吗？

在此处输入图像描述

标签： cssreactjssass

解决方案

React Bootstrap 有一个不错的轮播和其他一些很棒的组件。你可以在这里查看安装，非常简单

安装后，您需要将轮播加载到所需的组件上，如下所示

import Carousel from 'react-bootstrap/Carousel'

<Carousel>
      <Carousel.Item>
        <img
          className="d-block w-100"
          src="https://images.unsplash.com/photo-1501854140801-50d01698950b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60"
          alt="First slide"
        />
        <Carousel.Caption>
          <h3>First slide label</h3>
          <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
        </Carousel.Caption>
      </Carousel.Item>
<Carousel>

我在这里添加了一个工作示例https://codesandbox.io/s/crazy-dubinsky-r6bi6

推荐阅读