无法让这个 bootstrap carousel 工作

问题描述

这个引导程序轮播拒绝更改幻灯片，无论是使用指示器还是箭头，我的另一个轮播工作正常，我已经导入了所有引导程序和 javascript cdn，但我不知道为什么它不起作用。但是当我回到我用 bootstrap 构建的另一个旋转木马时一切正常

     <script
          src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
          integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
          crossorigin="anonymous"
        ></script>
    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
      integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
      integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
      crossorigin="anonymous"
    ></script>

import React from 'react'
import { Slides } from './Slides';
import {
  faArrowCircleRight,faArrowCircleLeft,faDiamond
} from '@fortawesome/pro-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';

export const Index = () => {
    return (
      <div
        id="carouselExampleIndicators "
        className="carousel slide rooms-carousel"
        data-ride="carousel"
      >
        <ol className="carousel-indicators">
          
          <FontAwesomeIcon
            data-target="#carouselExampleIndicators"
            data-slide-to="0"
            className="active indicators"
            icon={faDiamond}
            color="#f4efe8"
          />
          <FontAwesomeIcon
            data-target="#carouselExampleIndicators"
            data-slide-to="1"
            className=" indicators"
            icon={faDiamond}
            color="#f4efe8"
          />
          <FontAwesomeIcon
            data-target="#carouselExampleIndicators"
            data-slide-to="2"
            className=" indicators"
            icon={faDiamond}
            color="#f4efe8"
          />
        </ol>
        <div className="carousel-inner">
          <Slides />
        </div>
        <a
          className="carousel-control-prev"
          href="#carouselExampleIndicators"
          role="button"
          data-slide="prev"
        >
          <FontAwesomeIcon
            className="carousel-control-prev-icon"
            aria-hidden="true"
            className="text-center"
            icon={faArrowCircleLeft}
            size="2x"
            color="#f4efe8"
          />
          <span className="sr-only">PrevIoUs</span>
        </a>
        <a
          className="carousel-control-next"
          href="#carouselExampleIndicators"
          role="button"
          data-slide="next"
        >
          <FontAwesomeIcon
            className="carousel-control-next-icon"
            aria-hidden="true"
            className="text-center"
            icon={faArrowCircleRight}
            color="#f4efe8"
            size="2x"
          />

          <span className="sr-only">Next</span>
        </a>
      </div>
    );
}

解决方法

主 div 的 id 末尾有一个空格。