I'm trying to get a slider to work with bootstrap 3 carousel, based on some answers found here. I have a problem with the text, because all the examples I found are only with images while I would need a div with image and text.

The problem is that when the text flows it results in a very grainy blurry effect. Here is an example in order to understand the code used and the effect on the text.

Codepen example

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);
}

Is there a way to make the text flow without it being grainy blurry.? Thanks

CodePudding user response：

The problem is that a cloned version of the slide (both text and image) is being placed very slightly away from the original position.

The fault is in the CSS/LESS which is setting left position -33% and 33%. Three times 33% does not make 100%. While we can never get an exact 100/3% we can make it closer and if you replace the 33%s with 33.333333% any offset is not noticable. The 'blurriness' disappears.

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

}