创建支持前后图预览、适配横竖屏照片的Bootstrap轮播组件

核心修改思路：

• 给前后克隆的图片项增加专属类名，控制对齐方向往中间靠拢，消除竖屏图片产生的间隙
• 替换原有的浮动布局为flex布局，取消图片固定宽度限制，允许图片按原始比例自适应宽度，同时保证每个展示区块固定占1/3轮播宽度
• 图片渲染规则改为完整展示全部内容，无需裁剪

修改后JS代码 #

$('.carousel-item', '.multi-item-carousel').each(function(){
  var next = $(this).next();
  if (! next.length) {
    next = $(this).siblings(':first');
  }
  next.children(':first-child').clone().addClass('next-clone').appendTo($(this));
}).each(function(){
  var prev = $(this).prev();
  if (! prev.length) {
    prev = $(this).siblings(':last');
  }
  prev.children(':nth-last-child(2)').clone().addClass('prev-clone').prependTo($(this));
});

修改后CSS代码 #

/* Carousel CSS  */
.multi-item-carousel {
  overflow: hidden;
}

.multi-item-carousel .carousel-indicators {
  margin-right: 25%;
  margin-left: 25%;
}

.multi-item-carousel .carousel-control-prev,
.multi-item-carousel .carousel-control-next {
  background: rgba(255, 255, 255, 0.3);
  width: 25%;
  z-index: 11;
  /* .carousel-caption has z-index 10 */
}

.multi-item-carousel .carousel-inner {
  width: 150%;
  left: -25%;
  display: flex;
}

.multi-item-carousel .carousel-item {
  display: flex;
  width: 100%;
}

.multi-item-carousel .carousel-item-next:not(.carousel-item-left),
.multi-item-carousel .carousel-item-right.active {
  -webkit-transform: translate3d(33%, 0, 0);
  transform: translate3d(33%, 0, 0);
}

.multi-item-carousel .carousel-item-prev:not(.carousel-item-right),
.multi-item-carousel .carousel-item-left.active {
  -webkit-transform: translate3d(-33%, 0, 0);
  transform: translate3d(-33%, 0, 0);
}

.multi-item-carousel .item__third {
  flex: 0 0 33.33333333%;
  position: relative;
  display: flex;
  align-items: center;
}

/* 前置克隆项右对齐，贴合中间图左边缘 */
.multi-item-carousel .item__third.prev-clone {
  justify-content: flex-end;
}

/* 中间当前项居中对齐 */
.multi-item-carousel .item__third:not(.prev-clone):not(.next-clone) {
  justify-content: center;
}

/* 后置克隆项左对齐，贴合中间图右边缘 */
.multi-item-carousel .item__third.next-clone {
  justify-content: flex-start;
}

.multi-item-carousel img {
  max-width: 100%;
  height: 50vh;
  max-height: 50vh;
  object-fit: contain;
}

适配说明 #

HTML代码无需任何调整，直接替换原有JS和CSS即可生效。修改后横竖屏图片都会完整展示全部内容，不会被裁剪，左右相邻图片会自动向内对齐贴合中间图片边缘，不会出现空白间隙。如果需要调整轮播高度，直接修改img标签的height和max-height属性值即可。

内容的提问来源于stack exchange，提问作者Sara Fuerst