Javascript Jquery/Bootstrap 3滑块（移动单个项目）

我有一个滑块，我从另一篇文章中选择了一个非常类似的问题。滑块的目的是在屏幕上同时显示多个元素，而不是一个。然后，它们将一个接一个地移出屏幕，被另一个替换

范例

1-2-3-4-5-6>>>2-3-4-5-6-7>>>3-4-5-6-7-8

当前，滑块会一次移动整行，而不仅仅是向右/向左滑动一行。任何帮助都将不胜感激

谢谢

html:

Javascript

$(document).ready(function(){
  $('#myCarousel').carousel({
    interval: 2000
  })

  $('.carousel .item').each(function(){
    var next = $(this).next();
    if (!next.length) {
      next = $(this).siblings(':first');
    }
    next.children(':first-child').clone().appendTo($(this));

    for (var i=0;i<4;i++) {
      next=next.next();
      if (!next.length) {
        next = $(this).siblings(':first');
      }

      next.children(':first-child').clone().appendTo($(this));
    }
  });
});

---

你用正确的方式开始你的CSS，但是错过了100%的出场机会。因此，bootstrap在任何地方都使用100%定位或转换，您只需将其替换为16%：

/** Client Slider **/
.carousel-control.left,.carousel-control.right {background-image:none;}
.col-sm-2 {width: 16%;}

@media all and (transform-3d), (-webkit-transform-3d) {
  #myCarousel .carousel-inner > .item.next,
  #myCarousel .carousel-inner > .item.active.right {
    left: 0;
    -webkit-transform: translate3d(16%, 0, 0);
            transform: translate3d(16%, 0, 0);
  }
  #myCarousel .carousel-inner > .item.prev,
  #myCarousel .carousel-inner > .item.active.left {
    left: 0;
    -webkit-transform: translate3d(-16%, 0, 0);
            transform: translate3d(-16%, 0, 0);
  }
  #myCarousel .carousel-inner > .item.next.left,
  #myCarousel .carousel-inner > .item.prev.right,
  #myCarousel .carousel-inner > .item.active {
    left: 0;
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
}

#myCarousel .carousel-inner > .active {
  left: 0;
}

#myCarousel .carousel-inner > .next {
  left: 16%;
}
#myCarousel .carousel-inner > .prev {
  left: -16%;
}
#myCarousel .carousel-inner > .next.left,
#myCarousel .carousel-inner > .prev.right {
  left: 0;
}
#myCarousel .carousel-inner > .active.left {
  left: -16%;
}
#myCarousel .carousel-inner > .active.right {
  left: 16%;
}

---

更新后的

这是可行的，但有没有办法消除每次过渡后出现的滞后现象？感觉就像每次转换后都在校正图像宽度。编辑：很好，必须是jfiddle。非常感谢

$(document).ready(function(){
  $('#myCarousel').carousel({
    interval: 2000
  })

  $('.carousel .item').each(function(){
    var next = $(this).next();
    if (!next.length) {
      next = $(this).siblings(':first');
    }
    next.children(':first-child').clone().appendTo($(this));

    for (var i=0;i<4;i++) {
      next=next.next();
      if (!next.length) {
        next = $(this).siblings(':first');
      }

      next.children(':first-child').clone().appendTo($(this));
    }
  });
});

/** Client Slider **/
.carousel-control.left,.carousel-control.right {background-image:none;}
.col-sm-2 {width: 16%;}

@media all and (transform-3d), (-webkit-transform-3d) {
  #myCarousel .carousel-inner > .item.next,
  #myCarousel .carousel-inner > .item.active.right {
    left: 0;
    -webkit-transform: translate3d(16%, 0, 0);
            transform: translate3d(16%, 0, 0);
  }
  #myCarousel .carousel-inner > .item.prev,
  #myCarousel .carousel-inner > .item.active.left {
    left: 0;
    -webkit-transform: translate3d(-16%, 0, 0);
            transform: translate3d(-16%, 0, 0);
  }
  #myCarousel .carousel-inner > .item.next.left,
  #myCarousel .carousel-inner > .item.prev.right,
  #myCarousel .carousel-inner > .item.active {
    left: 0;
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
}

#myCarousel .carousel-inner > .active {
  left: 0;
}

#myCarousel .carousel-inner > .next {
  left: 16%;
}
#myCarousel .carousel-inner > .prev {
  left: -16%;
}
#myCarousel .carousel-inner > .next.left,
#myCarousel .carousel-inner > .prev.right {
  left: 0;
}
#myCarousel .carousel-inner > .active.left {
  left: -16%;
}
#myCarousel .carousel-inner > .active.right {
  left: 16%;
}