javascript - 无法让这个引导轮播工作
问题描述
这个引导轮播拒绝更改幻灯片,无论是使用指示器还是使用箭头,我的其他轮播工作正常,我已经导入了所有引导程序和 javascript cdn,并且不知道为什么它不起作用。但是当我回到用引导程序构建的另一个轮播时,一切正常
<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 末尾有一个空格。
推荐阅读
- android - 我有一个错误“E/RecyclerView:没有附加适配器:跳过布局”
- jquery - 通过jquery中的自由变换功能选择后如何取消选择元素?
- solr - SolrJ 和自定义 Solr 处理程序
- oracle - 在 oracle 中键入明智的求和和减法
- c# - 用 ':' 分隔符分割 1 个字符串
- java - Javafx:如果服务消息更新,标签变为空白(标签绑定到 msg)
- python - python中两个3D数组与NaN的皮尔逊相关性
- angular - Angular + Firebase:TypeError:this.productService.get(...).take 不是函数
- python-3.x - 是否可以在通用集中显示维恩图?
- java - Flink 1.4.2 SQL 映射?