react-bootstrap 轮播图 Carousel

最新推荐文章于 2024-08-10 08:34:49 发布

徐同保

最新推荐文章于 2024-08-10 08:34:49 发布

阅读量557

点赞数

分类专栏： web前端文章标签： javascript react.js

本文链接：https://blog.csdn.net/xutongbao/article/details/122106126

版权

web前端专栏收录该内容

735 篇文章 16 订阅

订阅专栏

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/