html - 如何使用下一个/上一个图像附近创建引导轮播？

Question

我创建了引导轮播。它工作正常，但我如何在下一个和上一个按钮上显示下一个和上一个图像。

在下面的网址中，您可以看到我到目前为止所做的事情。 https://imgur.com/a/vJnSuca

<div class="container image-slides">
    <div class="row r">
        <div class="col-md-2"></div>
        <div class="col-md-8">

            <div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
              <div class="carousel-inner">
                <div class="carousel-item active">
                  <img class="d-block w-100" src="images/festival-slider.jpg"
                    alt="First slide">
                </div>
                <div class="carousel-item">
                  <img class="d-block w-100" src="images/festival-slider.jpg"
                    alt="Second slide">
                </div>
                <div class="carousel-item">
                  <img class="d-block w-100" src="images/festival-slider.jpg"
                    alt="Third slide">
                </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-2"></div>
    </div>


</div>

我想在箭头按钮中显示下一个和上一个附近的图像。现在我只是将箭头更改为静态图像。

标签： htmlcssbootstrap-4carouselbootstrap-carousel