Show Multiple Slides, Move One Using Bootstrap 3.3.5 Carousel

I tried using this code snippet to get Bootstrap's carousel to show 6 items, but only advance 1 and it works with Bootstrap 3.0.2, but when I try to use it with Bootstrap 3.3.5, it

Solution 1:

Figured out that the latest version of Bootstrap adds some extra classes for moving the slides. Adding this CSS to override Bootstrap's fixed the issue:

.carousel-inner > .item.next,
.carousel-inner > .item.active.right {
  left: 0;
  -webkit-transform: translate3d(16.66666667%, 0, 0);
          transform: translate3d(16.66666667%, 0, 0);
}

.carousel-inner > .item.prev,
.carousel-inner > .item.active.left {
  left: 0;
  -webkit-transform: translate3d(-16.66666667%, 0, 0);
          transform: translate3d(-16.66666667%, 0, 0);
}

Fixed Bootply here