Bootstrap 5 -旋转木马中的导航不起作用

cqoc49vn 于 2023-09-28 发布在 Bootstrap

关注(0)|答案(5)|浏览(135)

我使用引导5，并希望实现一个图像轮播和模态。
下面是我的示例代码。

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css" rel="stylesheet">

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm" crossorigin="anonymous"></script>

<div class="row">
  <div class="col-md-6">
    <div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
      <div class="carousel-inner">

        <div class="carousel-item">
          <img src="https://via.placeholder.com/640x480.png/0088ff?text=animals+ratione" class="d-block w-100" alt="ab natus nemo">
        </div>
        <div class="carousel-item">
          <img src="https://via.placeholder.com/640x480.png/009999?text=animals+illum" class="d-block w-100" alt="ab natus nemo">
        </div>
        <div class="carousel-item active">
          <img src="https://via.placeholder.com/640x480.png/007766?text=animals+dignissimos" class="d-block w-100" alt="ab natus nemo">
        </div>
        <div class="carousel-item ">
          <img src="https://via.placeholder.com/640x480.png/0077aa?text=animals+ad" class="d-block w-100" alt="ab natus nemo">
        </div>
        <div class="carousel-item ">
          <img src="https://via.placeholder.com/640x480.png/0000aa?text=animals+totam" class="d-block w-100" alt="ab natus nemo">
        </div>
        <div class="carousel-item ">
          <img src="https://via.placeholder.com/640x480.png/000022?text=animals+et" class="d-block w-100" alt="ab natus nemo">
        </div>
        <div class="carousel-item ">
          <img src="https://via.placeholder.com/640x480.png/0066ee?text=animals+sed" class="d-block w-100" alt="ab natus nemo">
        </div>
        <div class="carousel-item ">
          <img src="https://via.placeholder.com/640x480.png/00dd33?text=animals+neque" class="d-block w-100" alt="ab natus nemo">
        </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>
  <div class="col-md-6">
    <h3>ab natus nemo</h3>
    <p>Architecto corrupti nulla dolorum sint. Rerum consequatur quidem et autem nobis qui. Hic fugiat voluptate dignissimos sed officia in odio.</p>
    <h4>$5.99</h4>
    <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#buyModal">
                    Buy
                </button>
  </div>
</div>

<div class="modal fade" id="buyModal" tabindex="-1" role="dialog" aria-labelledby="buyModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="buyModalLabel">Buy: ab natus nemo</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
      </div>
      <div class="modal-body">
        <p>You are about to purchase for $5.99.</p>
        <form method="POST" action="">
          <input type="hidden" name="_token" value="m46pmcbo0G2yuMVNyfwpcY07AomhmCY5AD2OixFy"> <button type="submit" class="btn btn-primary">Confirm</button>
        </form>
      </div>
    </div>
  </div>
</div>

在图像轮播中，两个导航按钮（下一个和上一个）不起作用。

在我的模式窗口中，关闭按钮没有正确呈现。

我尝试了bootstrap中的标准示例，但它们不能与我的代码一起工作。
有什么建议我做错了吗？

twitter-bootstrap

来源：https://stackoverflow.com/questions/76984842/bootstrap-5-navigation-in-carousel-is-not-working

5条答案

按热度按时间

odopli941#

HTML结构有一些问题，我将解决它们：

prev/forward按钮的类型应该是<button type='button'>，并将data-bs-target属性设置为模态的id，您正在使用<a>和href，将其更改为：

<button type="button" class="carousel-control-prev" data-bs-target="#carouselExampleControls" role="button" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
 </button>

对于模态关闭按钮，您可以自己设置内容，这是不需要的，因为这是Bootstrap样式的一部分。

此外，属性应该是data-bs-dismiss="modal"，而不是您当前拥有的data-dismiss="modal"。
以下内容就足够了：

<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
</button>

工作演示：
注：请放大演示，以便您看到转盘控件

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css" rel="stylesheet">

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm" crossorigin="anonymous"></script>

<div class="row">
  <div class="col-md-6">
    <div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
      <div class="carousel-inner">

        <div class="carousel-item">
          <img src="https://placehold.co/640x480/0088ff/FFF?text=animals+ratione" class="d-block w-100" alt="ab natus nemo">
        </div>
        <div class="carousel-item">
          <img src="https://placehold.co/640x480/009999/FFF?text=animals+illum" class="d-block w-100" alt="ab natus nemo">
        </div>
        <div class="carousel-item active">
          <img src="https://placehold.co/640x480/007766/FFF?text=animals+dignissimos" class="d-block w-100" alt="ab natus nemo">
        </div>
        <div class="carousel-item ">
          <img src="https://placehold.co/640x480/0077aa/FFF?text=animals+ad" class="d-block w-100" alt="ab natus nemo">
        </div>
        <div class="carousel-item ">
          <img src="https://placehold.co/640x480/0000aa/FFF?text=animals+totam" class="d-block w-100" alt="ab natus nemo">
        </div>
        <div class="carousel-item ">
          <img src="https://placehold.co/640x480/000022/FFF?text=animals+et" class="d-block w-100" alt="ab natus nemo">
        </div>
        <div class="carousel-item ">
          <img src="https://placehold.co/640x480/0066ee/FFF?text=animals+sed" class="d-block w-100" alt="ab natus nemo">
        </div>
        <div class="carousel-item ">
          <img src="https://placehold.co/640x480/00dd33/FFF?text=animals+neque" class="d-block w-100" alt="ab natus nemo">
        </div>
      </div>
      <button type="button" class="carousel-control-prev" data-bs-target="#carouselExampleControls" role="button" data-bs-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
      </button>
      <button type="button" class="carousel-control-next" data-bs-target="#carouselExampleControls" role="button" data-bs-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </button>
    </div>
  </div>
  <div class="col-md-6">
    <h3>ab natus nemo</h3>
    <p>Architecto corrupti nulla dolorum sint. Rerum consequatur quidem et autem nobis qui. Hic fugiat voluptate dignissimos sed officia in odio.</p>
    <h4>$5.99</h4>
    <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#buyModal">
                    Buy
                </button>
  </div>
</div>

<div class="modal fade" id="buyModal" tabindex="-1" role="dialog" aria-labelledby="buyModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="buyModalLabel">Buy: ab natus nemo</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <p>You are about to purchase for $5.99.</p>
        <form method="POST" action="">
          <input type="hidden" name="_token" value="m46pmcbo0G2yuMVNyfwpcY07AomhmCY5AD2OixFy"> <button type="submit" class="btn btn-primary">Confirm</button>
        </form>
      </div>
    </div>
  </div>
</div>

赞(0）回复(0）举报 2023-09-28

ryevplcw2#

您必须添加{position：fixed} css in button所有的代码都是ok我审查的代码.

<div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
        <div class="carousel-inner">
          <div class="carousel-item active">
            <img src="image1.jpg" class="d-block w-100" alt="...">
          </div>
          <div class="carousel-item">
            <img src="image2.jpg" class="d-block w-100" alt="...">
          </div>
          <div class="carousel-item">
            <img src="image3.jpg" class="d-block w-100" alt="...">
          </div>
        </div>
        <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev" style="position: fixed;">
          <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" style="position: fixed;">
          <span class="carousel-control-next-icon" aria-hidden="true"></span>
          <span class="visually-hidden">Next</span>
        </button>
      </div>

赞(0）回复(0）举报 2023-09-28

g2ieeal73#

实际上，你的问题是你正在使用bootstrap 5，并使用v4文档中的代码。
检查此v5 doc
与模态检查modal相同

赞(0）回复(0）举报 2023-09-28

gcxthw6b4#

用这个替换下一个和上一个按钮的标签。我在VS-Code中尝试过，现在工作得很好。至少狂欢是正常的我认为这也与“数据-bs-幻灯片”属性有关。希望对你有帮助。

<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>

赞(0）回复(0）举报 2023-09-28

fcipmucu5#

用于carousel控件的Bootstrap 5语法使用data-bs-slide属性而不是data-slide。可以在文档中查看更改。https://getbootstrap.com/docs/5.0/components/carousel/

赞(0）回复(0）举报 2023-09-28