twitter-bootstrap – Bootstrap Carousel Multi Items一次移动

发布时间：2020-12-18 00:06:01 所属栏目：安全来源：网络整理

导读：参见英文答案 Bootstrap carousel multiple frames at once15个我试图使用bootstrap创建多个项目轮播.我的问题是它将所有3个项目移动到1而不是一个. 请在此处查看演示： http://plnkr.co/edit/Fl0HZaU5x5ZkPEVo87u3?p=preview $('#myCarousel').carousel({

参见英文答案 > Bootstrap carousel multiple frames at once15个
我试图使用bootstrap创建多个项目轮播.我的问题是它将所有3个项目移动到1而不是一个.
请在此处查看演示：

http://plnkr.co/edit/Fl0HZaU5x5ZkPEVo87u3?p=preview

$('#myCarousel').carousel({
    interval: 10000
  })
  console.log($('.item'))
  $('.item').each(function() {

    var next = $(this).next();
    console.log(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));
    }
  });

解决方法

Bootstrap在3.3.0中添加了CSS3轮播转换.见 #13074

添加以下css修复它：

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


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

Bootply

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!