Bootstrap 3 轮播多个项目

Question

我正在尝试根据此处找到的一些答案，让滑块与 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);
}

有没有一种方法可以使文本流畅而不出现颗粒状模糊。？谢谢

Answer 1

问题是幻灯片的克隆版本（包括文本和图像）被放置得离原始位置非常远。

故障出在CSS/LESS设置左位置-33%和33%。三倍 33% 不等于 100%。虽然我们永远无法获得准确的 100/3%，但我们可以使其更接近，如果您将 33%s 替换为 33.333333%，则任何偏移都不会引起注意。 'blurriness' 消失。

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

}

Bootstrap 3 轮播多个项目

Bootstrap 3 carousel multiple items

jquery

css

twitter-bootstrap

twitter-bootstrap-3

carousel