带有多个项目的Bootstrap轮播 [英] Bootstrap carousel with multiple items

问题描述

我正在开发 JSFiddle 上的项目。您可以注意到，显示了6个项目，我想制作一个旋转木马，每张幻灯片显示3个项目。在研究了这个问题之后，我在 Codepen 上找到了这个很棒的项目。
我的项目的每个项目由以下代码表示：

I'm working on a project available on JSFiddle. As you can notice, there are 6 items displayed and I would like to make a carousel to display 3 items per slide. After researching this issue, I find this awesome project on Codepen. Each item of my project is represented by the following code:

<div class="wrapper">
    <img src="https://photos-2.dropbox.com/t/2/AACS3GcxUnMu4DpsfC5pF-zF55I8WHf1blL4AvkQULu1Gw/12/226666032/jpeg/32x32/1/_/1/2/3.jpg/EO2pmKoBGHsgAigC/iV0gUV38M-Y4EoQJWevkk6_etV3EZi1baTQUzImrReM?size=1024x768&size_mode=3" alt="" />

    <div class="overlay">
        <h2 class="header">A Movie in the Park: Kung Fu Panda</h2>
    </div>
</div>

在Codepen上代表这一个：

while the item on Codepen is represented by this one:

<div class="item active">
    <div class="col-xs-4">
        <a href="#1"><img src="http://placehold.it/300/f44336/000000" class="img-responsive"></a>
    </div>
</div>

每当我尝试要删除Codepen中的项目代码并从JSFiddle中放置我的项目代码，滑块就会停止工作。

Whenever I try to remove the item's code in Codepen and place my item's code from JSFiddle, the slider stops working.

请让我知道如何解决这个问题。

Please let me know how to solve this problem.

推荐答案

这是你想要的吗？请检查小提琴，你会明白，为什么它不起作用。您可能错过了一些库和CSS。

Is this what you wanted? Please check fiddle, you will understand, why it wasn't working. You may have missed some libraries and CSS.

$('#theCarousel').carousel({
  interval: false
})

$('.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));
  }
});

.multi-item-carousel{
  .carousel-inner{
    > .item{
      transition: .6s ease-in-out all;
    }
    .active{
      &.left{
        left:-33%;
      }
      &.right{
        left:33%;
      }
    }
    .next{
      left: 33%;
    }
    .prev{
      left: -33%;
    }
  }
  .carouse-control{
    &.left, &.right{
      background-image: none;
    }
  }

  @media all and (transform-3d), (-webkit-transform-3d) {
    &{
      .carousel-inner {
        > .item{
          transition: .6s ease-in-out all;
          -webkit-backface-visibility: visible;
          backface-visibility: visible;
          -webkit-perspective: none;
          -webkit-transform: none!important;
          transform: none!important;
        }
      }
    }
  }
}

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<div class="container">
  <div class="col-md-8 col-md-offset-2">
    <div class="carousel slide multi-item-carousel" id="theCarousel">
      <div class="carousel-inner">
        <div class="item active">
          <div class="col-xs-4 wrapper">
            <a href="#1"><img src="http://placehold.it/300/f44336/000000" class="img-responsive"></a>
          </div>
        </div>
        <div class="item">
          <div class="col-xs-4">
            <a href="#1"><img src="http://placehold.it/300/e91e63/000000" class="img-responsive"></a>
            <div class="overlay">
              <h5 class="header">A Movie in the Park: Kung Fu Panda</h5>
            </div>
          </div>
        </div>
        <div class="item">
          <div class="col-xs-4">
            <a href="#1"><img src="http://placehold.it/300/9c27b0/000000" class="img-responsive"></a>
            <h5 class="header">Batman Return</h5>
          </div>
        </div>
        <div class="item">
          <div class="col-xs-4">
            <a href="#1"><img src="http://placehold.it/300/673ab7/000000" class="img-responsive"></a>
            <h5 class="header">Deadpool</h5>
          </div>
        </div>
        <div class="item">
          <div class="col-xs-4">
            <a href="#1"><img src="http://placehold.it/300/4caf50/000000" class="img-responsive"></a>
          </div>
        </div>
        <div class="item">
          <div class="col-xs-4">
            <a href="#1"><img src="http://placehold.it/300/8bc34a/000000" class="img-responsive"></a>
          </div>
        </div>
      </div>
      <a class="left carousel-control" href="#theCarousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
      <a class="right carousel-control" href="#theCarousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
    </div>
  </div>
</div>

这篇关于带有多个项目的Bootstrap轮播的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！