react-bootstrap 轮播图 Carousel

 

import React, { useState, useEffect } from 'react';
import {
  Container,
  Row,
  Col,
  Stack,
  Form,
  Button,
  Alert,
  ToggleButtonGroup,
  ToggleButton,
  ButtonToolbar,
  ButtonGroup,
  InputGroup,
  FormControl,
  Dropdown,
  DropdownButton,
  Card,
  Carousel,
} from 'react-bootstrap';

function LoadingButton() {
  const [index, setIndex] = useState(0);

  const handleSelect = (selectedIndex, e) => {
    setIndex(selectedIndex);
  };
  return (
    <div className="m-test-wrap">
      <Carousel activeIndex={index} onSelect={handleSelect}>
        <Carousel.Item>
          <h1 className="m-carousel-text">666</h1>
        </Carousel.Item>
        <Carousel.Item>
          <h1 className="m-carousel-text">777</h1>
        </Carousel.Item>
        <Carousel.Item>
          <h1 className="m-carousel-text">888</h1>
        </Carousel.Item>
      </Carousel>
    </div>
  );
}

export default LoadingButton;

https://react-bootstrap.github.io/components/carousel/