如何自定义bootstrap 4轮播

Question

我的代码中有一个正在运行的引导轮播。我需要帮助的是自定义轮播。该项目的设计要求部分显示下一张图像。我无法弄清楚如何覆盖仅一次显示一张照片的引导程序设置。点击链接可查看我需要旋转木马的外观的照片。任何帮助将不胜感激！

我的代码：

<div class="col-md-8 home-intro-carousel">
          <div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
            <div class="carousel-inner carousel-intro">
              <div class="carousel-item active">
                <img class="w-100" src="img/test2.jpg" alt="First slide">
              </div>
              <div class="carousel-item">
                <img class="w-100" src="img/slide2.jpg" alt="Second slide">
              </div>
              <div class="carousel-item active">
                <img class="w-100" src="img/test2.jpg" alt="Third slide">
              </div>
            </div>
            <a class="carousel-control-prev first-carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
              <i class="fa fa-caret-right" style="color: #326570;" aria-hidden="true"></i>
              <span class="sr-only">Previous</span>
            </a>
            <a class="carousel-control-next first-carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
              <i class="fa fa-caret-left" aria-hidden="true"></i>
              <span class="sr-only">Next</span>
            </a>
          </div>
        </div>

carousel-design-mockup