显示上一个和下一个bootstrap轮播图像的结尾

Question

我已经看过关于这个主题的另一篇文章，并且已经玩过css，但似乎无法解决这个问题。

我正在构建一个带有引导程序的旋转木马，并希望下一个和之前的图像能够显示其结束并平滑过渡。目前，右侧的“下一个”图像没有显示，转换非常“微不足道”。关于如何在中心显示图像以及下一个和之前的图像显示其结束的任何想法？

Image shows carousel not showing the next image and the current image not centered.

/* === CAROUSEL === */

.carousel-inner {
    height: 515px;
}

.item {
    height: 515px;
}

.carousel-inner .item img {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    height: 515px;
    margin: 0 auto;
    display: inline-block;
}

.carousel {
    overflow: hidden;
}
.carousel-inner {
    width: 150%;
    left: -25%;
}
.carousel-inner > .item.next, 
.carousel-inner > .item.active.right {
    -webkit-transform: translate3d(33%, 0, 0);
    transform: translate3d(33%, 0, 0);
}
.carousel-inner > .item.prev, 
.carousel-inner > .item.active.left {
    -webkit-transform: translate3d(-33%, 0, 0);
    transform: translate3d(-33%, 0, 0);
}
.carousel-control.left, 
.carousel-control.right {
    background: rgba(255, 255, 255, 0.3);
    width: 2%;
}

 <!-- CAROUSEL SECTION
        =================================================================== -->
        
        <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
          <!-- Indicators -->
          <ol class="carousel-indicators">
            <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
            <li data-target="#carousel-example-generic" data-slide-to="1"></li>
            <li data-target="#carousel-example-generic" data-slide-to="2"></li>
          </ol>

          <!-- Wrapper for slides -->
          <div class="carousel-inner" role="listbox">
            <div class="item active">
              <img src="assets/img/carousel-1.jpg" alt="...">
              <div class="carousel-caption">

              </div>
            </div>
            <div class="item">
              <img src="assets/img/carousel-2.jpg" alt="...">
              <div class="carousel-caption">

              </div>
            </div>
            <div class="item">
              <img src="assets/img/carousel-3.jpg" alt="...">
              <div class="carousel-caption">

              </div>
            </div>
            ...
          </div>

          <!-- Controls -->
          <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
          </a>
          <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
          </a>
        </div>

        <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <!-- Include all compiled plugins (below), or include individual files as needed -->
        <script src="assets/js/bootstrap.min.js"></script>
        <!-- Carousel JS -->
        <script>
        $(document).ready(function () {
            $('#myCarousel').carousel({
                interval: 10000
            })
            $('.carousel .item').each(function () {
                var next = $(this).next();
                if (!next.length) {
                    next = $(this).siblings(':first');
                }
                next.children(':first-child').clone().appendTo($(this));
                if (next.next().length > 0) {
                    next.next().children(':first-child').clone().appendTo($(this));
                } else {
                    $(this).siblings(':first').children(':first-child').clone().appendTo($(this));
                }
            });
        });
        </script>
    </body>
</html>