让前一张和下一张照片显示在bootstrap轮播中

Question

我的轮播图片：

嘿伙计们，我试图将我的上一张/下一张照片放在我的旋转木马边缘（所以你可以看到三张照片，但只有第一张和第三张照片的一半）以{{1两者之间的差距。无法找到实现此目的的方法。我已经设定了旋转木马的高度并使图像居中。现在，如果我可以让其他图像在显示的图像旁边滑动！

谢谢你们！

＆＃13;

＆＃13;

10px

＆＃13;

<script>
$(document).ready(function() {
  $('#carousel-example-generic').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>

＆＃13;

.carousel-inner {
  height: 515px;
}

.item {
  height: 515px;
}

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

.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: 20%;
}

＆＃13;

＆＃13;

＆＃13;