【问题标题】:how to apply carousel in cards reactjs如何在卡片reactjs中应用轮播
【发布时间】: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


【解决方案1】:

根据bootstrap的官方文档,

.active 类需要添加到其中一张幻灯片,否则轮播将不可见。

您错过了将.active 类添加到轮播组件的.carousal-items 幻灯片之一。

无需添加display: flex; 属性。 bootstrap 的 row 类本身有一个 display: flex; 属性。

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">

  <title>Hello, world!</title>
</head>

<body>
  <div id="carouselExampleControls" class="carousel slide" style="background-color: black;" data-bs-ride="carousel">
    <div class="carousel-inner">
      <div class="carousel-item active">
        <div style="display: flex; justify-content: space-evenly;">
          <div class="card" style="width: 18rem;">
            <img src="..." class="card-img-top" alt="...">
            <div class="card-body">
              <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.
              </p>
            </div>
          </div>

          <div class="card" style="width: 18rem;">
            <img src="..." class="card-img-top" alt="...">
            <div class="card-body">
              <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.
              </p>
            </div>
          </div>

          <div class="card" style="width: 18rem;">
            <img src="..." class="card-img-top" alt="...">
            <div class="card-body">
              <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.
              </p>
            </div>
          </div>
        </div>
      </div>
      <div class="carousel-item">
        <div style="display: flex; justify-content: space-evenly;">
          <div class="card" style="width: 18rem;">
            <img src="..." class="card-img-top" alt="...">
            <div class="card-body">
              <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.
              </p>
            </div>
          </div>

          <div class="card" style="width: 18rem;">
            <img src="..." class="card-img-top" alt="...">
            <div class="card-body">
              <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.
              </p>
            </div>
          </div>

          <div class="card" style="width: 18rem;">
            <img src="..." class="card-img-top" alt="...">
            <div class="card-body">
              <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.
              </p>
            </div>
          </div>
        </div>
      </div>
      <div class="carousel-item">
        <div style="display: flex; justify-content: space-evenly;">
          <div class="card" style="width: 18rem;">
            <img src="..." class="card-img-top" alt="...">
            <div class="card-body">
              <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.
              </p>
            </div>
          </div>

          <div class="card" style="width: 18rem;">
            <img src="..." class="card-img-top" alt="...">
            <div class="card-body">
              <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.
              </p>
            </div>
          </div>

          <div class="card" style="width: 18rem;">
            <img src="..." class="card-img-top" alt="...">
            <div class="card-body">
              <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="visually-hidden">Previous</span>
    </button>
    <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="visually-hidden">Next</span>
    </button>
  </div>




  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>


</body>

</html>

【讨论】:

  • 谢谢先生的帮助,但我想要这个旋转木马skype.com/en请帮我怎么做
  • 试试this
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2021-05-19
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2023-01-09
  • 2020-12-03
  • 1970-01-01
相关资源
最近更新 更多