bootstrap 5 轮播控件不起作用并且指示器不显示

Posted 2023-03-21

【中文标题】bootstrap 5 轮播控件不起作用并且指示器不显示

【英文标题】：bootstrap 5 carousel controls doesn't work and indicators doesn't show

【发布时间】：2021-12-25 23:18:51

【问题描述】：

我的 html 上有一个简单的引导轮播，但控件似乎不起作用，并且指示器没有出现。

编辑： 我查看了文档并按照他们所说的做了，但没有奏效。

代码如下：

.gallery-carousel
    
        position: relative;
        top: 8vh;
        height: 60vh;
        width: 90%;
        left: 5%;
        overflow: hidden;
    

    .carousel-inner,
    .carousel-item
    
        width: 100%;
        height: 100%;
    

    .carousel-item img
    
        width: 100%;
        height: 100%;
        background-size: cover;
    

    <!-- CSS only -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
    <!-- javascript Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>
    
<!--Carousel-->
<div id="carouselExampleControls" class="carousel slide gallery-carousel" data-ride="carousel">
    <ol class="carousel-indicators">
        <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
        <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
    </ol>
    <div class="carousel-inner">
            <div class="carousel-item active">
                <img class="d-block w-100" style="background-image: url('https://farm5.staticflickr.com/4528/38249721602_1dfb84e8a9_b.jpg')">
            </div>
            <div class="carousel-item">
                <img class="d-block w-100" style="background-image: url('https://farm5.staticflickr.com/4524/37570788654_c315f9d0b0_b.jpg')">
            </div>
    </div>
    <!-- Controls -->
    <a class="carousel-control-prev" data-target="#carouselExampleControls" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      </a>
      <a class="carousel-control-next" data-target="#carouselExampleControls" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
      </a>
</div>

我在这里寻找其他答案，但没有一个对我有用。

【问题讨论】：

Does this help?

@Coja 不幸的是没有。

发布 js，我想有人会帮助你，我认为函数在 js 上运行，而不是 CSS 或 HTML，因为我对 js 知之甚少 :(

@Coja 我没有 js，据我了解，文档引导轮播不需要 js 才能工作。

【参考方案1】：

好的，我已经设法通过手动添加事件侦听器使其工作，如下所示：

    $(".carousel-control-prev").click(function () 
    $('#carouselExampleControls').carousel('prev');
)
$(".carousel-control-next").click(function () 
    $('#carouselExampleControls').carousel('next');
)

虽然指标没有显示并导致错误，但当我删除它们时一切正常。