Bootstrap 3轮播多个项目答案

【问题标题】：Bootstrap 3 carousel multiple itemsBootstrap 3轮播多个项目
【发布时间】：2022-01-08 11:01:26
【问题描述】：

根据此处找到的一些答案，我正在尝试让滑块与 bootstrap 3 轮播一起使用。我的文本有问题，因为我找到的所有示例都只有图像，而我需要一个带有图像和文本的 div。

问题在于，当文本流动时，会产生非常颗粒状的模糊效果。这是一个示例，以了解所使用的代码和对文本的影响。

JS：

    // Instantiate the Bootstrap carousel
$('.multi-item-carousel').carousel({
  interval: false
});

// for every slide in carousel, copy the next slide's item in the slide.
// Do the same for the next, next item.
$('.multi-item-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));
  }
});

CSS：

.multi-item-carousel{
  .carousel-inner{
    > .item{
      transition: 500ms ease-in-out left;
    }
    .active{
      &.left{
        left:-33%;
      }
      &.right{
        left:33%;
      }
    }
    .next{
      left: 33%;
    }
    .prev{
      left: -33%;
    }
    @media all and (transform-3d), (-webkit-transform-3d) {
      > .item{
        // use your favourite prefixer here
        transition: 500ms ease-in-out left;
        transition: 500ms ease-in-out all;
        backface-visibility: visible;
        transform: none!important;
      }
    }
  }
  .carouse-control{
    &.left, &.right{
      background-image: none;
    }
  }
}

// non-related styling:
body{
  background: #fff;
  color: #000;
  font-size: 26px;
}
h1{
  color: white;
  font-size: 2.25em;
  text-align: center;
  margin-top: 1em;
  margin-bottom: 2em;
  text-shadow: 0px 2px 0px rgba(0, 0, 0, 1);
}

有没有一种方法可以使文本流畅而不会变得模糊不清。？谢谢

【问题讨论】：

请你检查你的codepen链接，因为它没有完全进入你的问题。
@A Haworth 抱歉，我无法插入。现在可以了。

标签： jquery css twitter-bootstrap twitter-bootstrap-3 carousel

【解决方案1】：

问题是幻灯片的克隆版本（文本和图像）被放置在距离原始位置非常小的位置。

错误在于 CSS/LESS 设置左侧位置 -33% 和 33%。三倍 33% 并不等于 100%。虽然我们永远无法获得准确的 100/3%，但我们可以让它更接近，如果您将 33%s 替换为 33.333333%，则任何偏移都不会引起注意。 “模糊”消失了。

  .active{
      &.left{
        left:-33.333333%;
      }
      &.right{
        left:33.333333%;
      }
    }
    .next{
      left: 33.333333%;
    }
    .prev{
      left: -33.333333%;

}

【讨论】：