0

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

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

4

1 回答 1

0

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

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

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

于 2021-11-14T12:24:24.840 回答