首页 > 解决方案 > Bootstrap Carousel Image Slider 无法在 React 中滑动

问题描述

import React, { Component } from "react";
import img1 from "./images/img1.jpg";
import img2 from "./images/img2.jpg";
import img3 from "./images/img3.jpg";

class Slider extends Component {
  state = {};
  render() {
    return (
      <div
        id="carouselExampleSlidesOnly"
        className="carousel slide"
        data-ride="carousel"
      >
        <div className="carousel-inner">
          <div className="carousel-item active">
            <img src={img1} className="d-block w-100" alt="First Slide" />
          </div>
          <div className="carousel-item">
            <img src={img2} className="d-block w-100" alt="Second Slide" />
          </div>
          <div className="carousel-item">
            <img src={img3} className="d-block w-100" alt="Third Slide" />
          </div>
        </div>
      </div>
    );
  }
}

export default Slider;

我正在尝试在 React 中使用引导程序的 Carousel 组件(版本 6.13.4)开发“图像滑块”。我的滑块只是加载第一张图片。它不会滑动到下一个图像。以上是我的滑块组件。请帮助我了解这里出了什么问题?

标签: cssreactjsbootstrap-4

解决方案


推荐阅读