javascript - bootstrap 4 carousel - 图像指示器显示/隐藏

Question

我正在使用 bootstrap 4 创建产品轮播。我正在使用图像作为指标。假设我有 20 个图像项，所以会有 20 个图像指示符，这里我不想一次显示所有指示符，我想一次只显示 5 个。现在假设用户单击第二个图像指示器，然后第一个图像指示器将向左滚动并隐藏，第 6 个将显示，依此类推。当用户单击下一个和上一个箭头时也会发生同样的情况。这是供参考的图像

以下是我尝试过的代码：

<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel" data-interval="false">
    <ol id="carouselIndicators" class="carousel-indicators">
        <li data-target="#carouselExampleIndicators" data-slide-to="0" class="">
            <img src="http://127.0.0.1:8000/thumb/2/100/100" alt="First slide">
        </li>
        <li data-target="#carouselExampleIndicators" data-slide-to="1">
            <img src="http://127.0.0.1:8000/thumb/3/100/100" alt="1 slide">
        </li>
        <li data-target="#carouselExampleIndicators" data-slide-to="2">
            <img src="http://127.0.0.1:8000/thumb/4/100/100" alt="2 slide">
        </li>
        <li data-target="#carouselExampleIndicators" data-slide-to="3">
            <img src="http://127.0.0.1:8000/thumb/5/100/100" alt="3 slide">
        </li>
        <li data-target="#carouselExampleIndicators" data-slide-to="4" class="">
            <img src="http://127.0.0.1:8000/thumb/6/100/100" alt="4 slide">
        </li>
        <li data-target="#carouselExampleIndicators" data-slide-to="5" class="">
            <img src="http://127.0.0.1:8000/thumb/7/100/100" alt="5 slide">
        </li>
        <li data-target="#carouselExampleIndicators" data-slide-to="6" class="">
            <img src="http://127.0.0.1:8000/thumb/8/100/100" alt="6 slide">
        </li>
        <li data-target="#carouselExampleIndicators" data-slide-to="7" class="">
            <img src="http://127.0.0.1:8000/thumb/9/100/100" alt="7 slide">
        </li>
        <li data-target="#carouselExampleIndicators" data-slide-to="8" class="">
            <img src="http://127.0.0.1:8000/thumb/10/100/100" alt="8 slide">
        </li>
        <li data-target="#carouselExampleIndicators" data-slide-to="9" class="active">
            <img src="http://127.0.0.1:8000/thumb/11/100/100" alt="9 slide">
        </li>
        <li data-target="#carouselExampleIndicators" data-slide-to="10">
            <img src="http://127.0.0.1:8000/thumb/12/100/100" alt="10 slide">
        </li>
    </ol>


    <a class="carousel-control-prev" href="#carouselExampleIndicators" 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="#carouselExampleIndicators" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>


    <div class="carousel-inner">
        <div class="carousel-item">
            <img class="d-block w-100" src="http://127.0.0.1:8000/thumb/2/500/700" alt="First slide">
        </div>
        <div class="carousel-item">
            <img class="d-block w-100" src="http://127.0.0.1:8000/thumb/3/500/700" alt="2 slide">
        </div>
        <div class="carousel-item">
            <img class="d-block w-100" src="http://127.0.0.1:8000/thumb/4/500/700" alt="3 slide">
        </div>
        <div class="carousel-item">
            <img class="d-block w-100" src="http://127.0.0.1:8000/thumb/5/500/700" alt="4 slide">
        </div>
        <div class="carousel-item">
            <img class="d-block w-100" src="http://127.0.0.1:8000/thumb/6/500/700" alt="5 slide">
        </div>
        <div class="carousel-item">
            <img class="d-block w-100" src="http://127.0.0.1:8000/thumb/7/500/700" alt="6 slide">
        </div>
        <div class="carousel-item">
            <img class="d-block w-100" src="http://127.0.0.1:8000/thumb/8/500/700" alt="7 slide">
        </div>
        <div class="carousel-item">
            <img class="d-block w-100" src="http://127.0.0.1:8000/thumb/9/500/700" alt="8 slide">
        </div>
        <div class="carousel-item">
            <img class="d-block w-100" src="http://127.0.0.1:8000/thumb/10/500/700" alt="9 slide">
        </div>
        <div class="carousel-item active">
            <img class="d-block w-100" src="http://127.0.0.1:8000/thumb/11/500/700" alt="10 slide">
        </div>
        <div class="carousel-item">
            <img class="d-block w-100" src="http://127.0.0.1:8000/thumb/12/500/700" alt="11 slide">
        </div>                                                                                                                                                                               </div>
    </div>
</div>

我成功地只显示了所需的指标数量，但我无法滚动指标。

标签： javascripthtmljquerycssbootstrap-4