根據此處找到的一些答案，我正在嘗試讓滑塊與 bootstrap 3 carousel 一起使用。我的文本有問題，因為我找到的所有示例都只有影像，而我需要一個帶有影像和文本的 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);
}
有沒有一種方法可以讓文本流動而不會出現顆粒狀模糊。？謝謝
uj5u.com熱心網友回復：
問題是幻燈片的克隆版本（文本和影像）被放置在離原始位置非常輕微的位置。
故障出在 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%;
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/371611.html