Блог

Я пытаюсь заставить слайдер работать с bootstrap 3 carousel, основываясь на некоторых ответах, найденных здесь . У меня проблема с текстом, потому что все примеры, которые я нашел, содержат только изображения, в то время как мне нужен div с изображением и текстом.

Проблема в том, что когда текст течет, это приводит к очень зернистому размытому эффекту. Вот пример, чтобы понять используемый код и влияние на текст.

Пример Codepen

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{
      amp;.left{
        left:-33%;
      }
      amp;.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{
    amp;.left, amp;.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);
}
 

Есть ли способ сделать текстовый поток без его зернистости размытым.?
Спасибо

Проблема в том, что клонированная версия слайда (как текста, так и изображения) размещается очень немного в стороне от исходного положения.

Ошибка заключается в CSS / LESS, который устанавливает левую позицию -33% и 33%. Три раза по 33% не составляют 100%. Хотя мы никогда не сможем получить точные 100/3%, мы можем приблизить его, и если вы замените 33% s на 33.333333%, любое смещение не будет заметно. «Размытость» исчезает.

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

}