【发布时间】:2021-06-24 13:17:10
【问题描述】:
我遇到了一个问题,谁能告诉我如何在卡片中应用轮播,我做到了,但它不起作用,下面我分享我的整个轮播代码,请结帐并告诉我该怎么做
cards.js
这是我在卡片中使用 carousal 的卡片文件,但它不起作用
import React from "react";
import "./Cards.css";
import Card from "./Card";
const Cards = () => {
return (
<div className="container">
<h1>
<b>Discover more features</b>
</h1>
<div className="row"></div>
<div
id="carouselExampleControls"
class="carousel slide"
data-ride="carousel"
>
<div class="carousel-inner">
<div class="carousel-item " style={{ display: "flex" }}>
<div className="row">
<div className="col-sm-3">
<Card />
</div>
<div className="col-sm-3">
<Card />
</div>
<div className="col-sm-3">
<Card />
</div>
<div className="col-sm-3">
<Card />
</div>
</div>
</div>
<div class="carousel-item">
<div className="row">
<div className="col-sm-3">
<Card />
</div>
<div className="col-sm-3">
<Card />
</div>
<div className="col-sm-3">
<Card />
</div>
<div className="col-sm-3">
<Card />
</div>
</div>
</div>
</div>
<a
class="carousel-control-prev"
href="#carouselExampleControls"
role="button"
data-slide="prev"
>
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a
class="carousel-control-next"
href="#carouselExampleControls"
role="button"
data-slide="next"
>
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
);
};
export default Cards;
【问题讨论】:
-
你能具体说明不工作的部分吗?
-
This 可能会有所帮助。
-
谢谢先生,但我想在轮播中申请卡片,我该怎么做
标签: reactjs npm bootstrap-4 carousel