Bootstrap 3輪播多個項目

Question

根據此處找到的一些答案，我正在嘗試讓 slider 與引導程序 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

問題是幻燈片的克隆版本（文本和圖像）被放置在離原始 position 非常遠的地方。

故障出在 CSS/LESS 中，設置為左 position -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%;
 

}