自引导转盘同时多个框架

StackOverflow https://stackoverflow.com//questions/20007610

题

这是我试图通过举止实现的效果3 Carousel

而不是一次只是显示一帧，它显示侧滑动的n帧。然后，当您幻灯片（或当IT自动幻灯片）时，它会像它一样移位幻灯片组。

这可以用bootstrap 3的旋转木马完成我希望我不必去寻找另一个jquery插件...

有帮助吗？

解决方案

这可以用自靴子3的旋转木马完成吗？我希望我不会 去寻找另一个jquery插件

截至2013-12-08答案是否定的。您正在寻找的效果是不可能使用Bootstrap 3的通用转盘插件。但是，这是一个简单的jQuery插件，似乎是你想要的东西 http://sorgalla.com/jcarousel/

其他提示

更新的2019 ...

bootstrap 4

旋转木马在4.x中发生了变化，并且可以像这样覆盖多幻灯片动画过渡... 

.carousel-inner .carousel-item-right.active,
.carousel-inner .carousel-item-next {
  transform: translateX(33.33%);
}

.carousel-inner .carousel-item-left.active, 
.carousel-inner .carousel-item-prev {
  transform: translateX(-33.33%)
}

.carousel-inner .carousel-item-right,
.carousel-inner .carousel-item-left{ 
  transform: translateX(0);
}
.

bootstrap 4 alpha.6 demo
bootstrap 4.0.0（显示4，一次推进1）
bootstrap 4.1.0（显示3，一次推进1）
bootstrap 4.1.0（立刻推进）
bootstrap 4.3.1响应（显示多个，apport 1） new
bootstrap 4.3.1带卡的旋转木马 new

另一个选项是响应性旋转木马，只能在较小的屏幕上显示和前进 1幻灯片，但显示多幻灯片是较大的屏幕。这一点而不是像上一个例子一样克隆幻灯片，而是调整CSS并使用jQuery以移动额外的载玻片以允许连续循环（环绕）：

请不要只是复制和粘贴此代码。首先，了解它的工作原理。

bootstrap 4响应（显示3， 1滑动移动） 

@media (min-width: 768px) {

    /* show 3 items */
    .carousel-inner .active,
    .carousel-inner .active + .carousel-item,
    .carousel-inner .active + .carousel-item + .carousel-item {
        display: block;
    }

    .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left),
    .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item,
    .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item + .carousel-item {
        transition: none;
    }

    .carousel-inner .carousel-item-next,
    .carousel-inner .carousel-item-prev {
      position: relative;
      transform: translate3d(0, 0, 0);
    }

    .carousel-inner .active.carousel-item + .carousel-item + .carousel-item + .carousel-item {
        position: absolute;
        top: 0;
        right: -33.3333%;
        z-index: -1;
        display: block;
        visibility: visible;
    }

    /* left or forward direction */
    .active.carousel-item-left + .carousel-item-next.carousel-item-left,
    .carousel-item-next.carousel-item-left + .carousel-item,
    .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item,
    .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item + .carousel-item {
        position: relative;
        transform: translate3d(-100%, 0, 0);
        visibility: visible;
    }

    /* farthest right hidden item must be abso position for animations */
    .carousel-inner .carousel-item-prev.carousel-item-right {
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
        display: block;
        visibility: visible;
    }

    /* right or prev direction */
    .active.carousel-item-right + .carousel-item-prev.carousel-item-right,
    .carousel-item-prev.carousel-item-right + .carousel-item,
    .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item,
    .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item + .carousel-item {
        position: relative;
        transform: translate3d(100%, 0, 0);
        visibility: visible;
        display: block;
        visibility: visible;
    }

}

<div class="container-fluid">
    <div id="carouselExample" class="carousel slide" data-ride="carousel" data-interval="9000">
        <div class="carousel-inner row w-100 mx-auto" role="listbox">
            <div class="carousel-item col-md-4 active">
                <img class="img-fluid mx-auto d-block" src="//placehold.it/600x400/000/fff?text=1" alt="slide 1">
            </div>
            <div class="carousel-item col-md-4">
                <img class="img-fluid mx-auto d-block" src="//placehold.it/600x400?text=2" alt="slide 2">
            </div>
            <div class="carousel-item col-md-4">
                <img class="img-fluid mx-auto d-block" src="//placehold.it/600x400?text=3" alt="slide 3">
            </div>
            <div class="carousel-item col-md-4">
                <img class="img-fluid mx-auto d-block" src="//placehold.it/600x400?text=4" alt="slide 4">
            </div>
            <div class="carousel-item col-md-4">
                <img class="img-fluid mx-auto d-block" src="//placehold.it/600x400?text=5" alt="slide 5">
            </div>
            <div class="carousel-item col-md-4">
                <img class="img-fluid mx-auto d-block" src="//placehold.it/600x400?text=6" alt="slide 6">
            </div>
            <div class="carousel-item col-md-4">
                <img class="img-fluid mx-auto d-block" src="//placehold.it/600x400?text=7" alt="slide 7">
            </div>
            <div class="carousel-item col-md-4">
                <img class="img-fluid mx-auto d-block" src="//placehold.it/600x400?text=8" alt="slide 7">
            </div>
        </div>
        <a class="carousel-control-prev" href="#carouselExample" role="button" data-slide="prev">
            <i class="fa fa-chevron-left fa-lg text-muted"></i>
            <span class="sr-only">Previous</span>
        </a>
        <a class="carousel-control-next text-faded" href="#carouselExample" role="button" data-slide="next">
            <i class="fa fa-chevron-right fa-lg text-muted"></i>
            <span class="sr-only">Next</span>
        </a>
    </div>
</div>
.

- bootstrap 4响应（在移动设备上显示4,11幻灯片） < / a>
- bootstrap 4响应（在移动设备上显示5,1，1幻灯片）

bootstrap 3

这是bootply上的3.x示例： http://bootply.com/89193

您需要在项目中放置一行图像。这是另一个不在较小的屏幕宽度堆叠图像的另一个版本： http://bootply.com/92514

编辑替代方法 appling一个幻灯片的时间：

使用jquery克隆下一个项目.. 

$('.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相应地放置...

之前3.3.1 

.carousel-inner .active.left { left: -33%; }
.carousel-inner .next        { left:  33%; }
.

3.3.1

后 
.carousel-inner .item.left.active {
  transform: translateX(-33%);
}
.carousel-inner .item.right.active {
  transform: translateX(33%);
}

.carousel-inner .item.next {
  transform: translateX(33%)
}
.carousel-inner .item.prev {
  transform: translateX(-33%)
}

.carousel-inner .item.right,
.carousel-inner .item.left { 
  transform: translateX(0);
}
.

这将在时间 show 3，但是一次只滑动一个

bootstrap 3.x演示

请不要复制和粘贴此代码。首先，了解它是如何工作的。此答案在这里到 帮助您学习 。

加倍这个修改后的引导4旋转木马只能正常工作（滚动循环停止工作）
如何在单页中制作2个引导滑块而不混合他们的CSS和jQuery？
bootstrap 4多旋转木马显示4图像3

所有上述解决方案都是言辞和越野车。甚至不要尝试。使用其他libs。我找到了最好的 - http://sachinchoolur.github.io/lightslider 与Bootstrap一起工作，不会添加垃圾HTML，高度可配置，响应，移动友好等... 

$('.multi-item-carousel').lightSlider({
    item: 4,
    pager: false,
    autoWidth: false,
    slideMargin: 0
});
.

This is a working twitter bootstrap 3.

Here is the javascript:

$('#myCarousel').carousel({
    interval: 10000
})

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

And the css:

.carousel-inner .active.left  { left: -33%;             }
.carousel-inner .active.right { left: 33%;              }
.carousel-inner .next         { left: 33%               }
.carousel-inner .prev         { left: -33%              }
.carousel-control.left        { background-image: none; }
.carousel-control.right       { background-image: none; }
.carousel-inner .item         { background: white;      }

You can see it in action at this Jsfiddle

The reason i added this answer because the other ones don't work entirely. I found 2 bugs inside them, one of them was that the left arrow generated a strange effect and the other was about the text getting bold in some situations witch can be resolved by setting the background color so the bottom item wont be visible while the transition effect.

This is what worked for me. Very simple jQuery and CSS to make responsive carousel works independently of carousels on the same page. Highly customizable but basically a div with white-space nowrap containing a bunch of inline-block elements and put the last one at the beginning to move back or the first one to the end to move forward. Thank you insertAfter!

$('.carosel-control-right').click(function() {
  $(this).blur();
  $(this).parent().find('.carosel-item').first().insertAfter($(this).parent().find('.carosel-item').last());
});
$('.carosel-control-left').click(function() {
  $(this).blur();
  $(this).parent().find('.carosel-item').last().insertBefore($(this).parent().find('.carosel-item').first());
});
@media (max-width: 300px) {
  .carosel-item {
    width: 100%;
  }
}
@media (min-width: 300px) {
  .carosel-item {
    width: 50%;
  }
}
@media (min-width: 500px) {
  .carosel-item {
    width: 33.333%;
  }
}
@media (min-width: 768px) {
  .carosel-item {
    width: 25%;
  }
}
.carosel {
  position: relative;
  background-color: #000;
}
.carosel-inner {
  white-space: nowrap;
  overflow: hidden;
  font-size: 0;
}
.carosel-item {
  display: inline-block;
}
.carosel-control {
  position: absolute;
  top: 50%;
  padding: 15px;
  box-shadow: 0 0 10px 0px rgba(0, 0, 0, 0.5);
  transform: translateY(-50%);
  border-radius: 50%;
  color: rgba(0, 0, 0, 0.5);
  font-size: 30px;
  display: inline-block;
}
.carosel-control-left {
  left: 15px;
}
.carosel-control-right {
  right: 15px;
}
.carosel-control:active,
.carosel-control:hover {
  text-decoration: none;
  color: rgba(0, 0, 0, 0.8);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="carosel" id="carosel1">
  <a class="carosel-control carosel-control-left glyphicon glyphicon-chevron-left" href="#"></a>
  <div class="carosel-inner">
    <img class="carosel-item" src="http://placehold.it/500/bbbbbb/fff&amp;text=1" />
    <img class="carosel-item" src="http://placehold.it/500/CCCCCC&amp;text=2" />
    <img class="carosel-item" src="http://placehold.it/500/eeeeee&amp;text=3" />
    <img class="carosel-item" src="http://placehold.it/500/f4f4f4&amp;text=4" />
    <img class="carosel-item" src="http://placehold.it/500/fcfcfc/333&amp;text=5" />
    <img class="carosel-item" src="http://placehold.it/500/f477f4/fff&amp;text=6" />
  </div>
  <a class="carosel-control carosel-control-right glyphicon glyphicon-chevron-right" href="#"></a>
</div>
<div class="carosel" id="carosel2">
  <a class="carosel-control carosel-control-left glyphicon glyphicon-chevron-left" href="#"></a>
  <div class="carosel-inner">
    <img class="carosel-item" src="http://placehold.it/500/bbbbbb/fff&amp;text=1" />
    <img class="carosel-item" src="http://placehold.it/500/CCCCCC&amp;text=2" />
    <img class="carosel-item" src="http://placehold.it/500/eeeeee&amp;text=3" />
    <img class="carosel-item" src="http://placehold.it/500/f4f4f4&amp;text=4" />
    <img class="carosel-item" src="http://placehold.it/500/fcfcfc/333&amp;text=5" />
    <img class="carosel-item" src="http://placehold.it/500/f477f4/fff&amp;text=6" />
  </div>
  <a class="carosel-control carosel-control-right glyphicon glyphicon-chevron-right" href="#"></a>
</div>

The most popular answer is right but I think the code is uselessly complicated. With the same css, this jquery code is easier to understand I believe:

$('#myCarousel').carousel({
  interval: 10000
})

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

Update 2019-03-06 -- Bootstrap v4.3.1

It seems the new Bootstrap version adds a margin-right: -100% to each item, therefore in the responsive solution given in the most upvoted answer in here, this property should be reset, e.g.:

.carousel-inner .carousel-item {
    margin-right: inherit;
}

A working codepen with v4.3.1 in LESS.

try this.....it work in mine.... code:

<div class="container">
    <br>
    <div id="myCarousel" class="carousel slide" data-ride="carousel">
        <!-- Indicators -->
        <ol class="carousel-indicators">
            <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
            <li data-target="#myCarousel" data-slide-to="1"></li>
            <li data-target="#myCarousel" data-slide-to="2"></li>
            <li data-target="#myCarousel" data-slide-to="3"></li>
        </ol>

        <!-- Wrapper for slides -->
        <div class="carousel-inner" role="listbox">
            <div class="item active">
                <div class="span4" style="padding-left: 18px;">
                    <img src="http://placehold.it/290x180" class="img-thumbnail">
                    <img src="http://placehold.it/290x180" class="img-thumbnail">
                    <img src="http://placehold.it/290x180" class="img-thumbnail">
                </div>
            </div>
            <div class="item">
                 <div class="span4" style="padding-left: 18px;">
                    <img src="http://placehold.it/290x180" class="img-thumbnail">
                    <img src="http://placehold.it/290x180" class="img-thumbnail">
                    <img src="http://placehold.it/290x180" class="img-thumbnail">
                </div>
            </div>
        </div>
        <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>
</div>


    $('#carousel-example-generic').on('slid.bs.carousel', function () {
        $(".item.active:nth-child(" + ($(".carousel-inner .item").length -1) + ") + .item").insertBefore($(".item:first-child"));
        $(".item.active:last-child").insertBefore($(".item:first-child"));
    });    
        .item.active,
        .item.active + .item,
        .item.active + .item  + .item {
           width: 33.3%;
           display: block;
           float:left;
        }          
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" style="max-width:800px;">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
        <img data-src="holder.js/300x200?text=1">
    </div>
    <div class="item">
        <img data-src="holder.js/300x200?text=2">
    </div>
    <div class="item">
        <img data-src="holder.js/300x200?text=3">
    </div>
    <div class="item">
        <img data-src="holder.js/300x200?text=4">
    </div>
    <div class="item">
        <img data-src="holder.js/300x200?text=5">
    </div>
    <div class="item">
        <img data-src="holder.js/300x200?text=6">
    </div>
    <div class="item">
        <img data-src="holder.js/300x200?text=7">
    </div>    
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/holder/2.9.1/holder.min.js"></script>

I had the same problem and the solutions described here worked well. But I wanted to support window size (and layout) changes. The result is a small library that solves all the calculation. Check it out here: https://github.com/SocialbitGmbH/BootstrapCarouselPageMerger

To make the script work, you have to add a new <div> wrapper with the class .item-content directly into your .item <div>. Example:

<div class="carousel slide multiple" id="very-cool-carousel" data-ride="carousel">
    <div class="carousel-inner" role="listbox">
        <div class="item active">
            <div class="item-content">
                First page
            </div>
        </div>
        <div class="item active">
            <div class="item-content">
                Second page
            </div>
        </div>
    </div>
</div>

Usage of this library:

socialbitBootstrapCarouselPageMerger.run('div.carousel');

To change the settings:

socialbitBootstrapCarouselPageMerger.settings.spaceCalculationFactor = 0.82;

Example:

As you can see, the carousel gets updated to show more controls when you resize the window. Check out the watchWindowSizeTimeout setting to control the timeout for reacting to window size changes.

<!--css code--> 
    .carousel-showsixmoveone .carousel-control {
          width: 4%;
          background-image: none;
        }
        .carousel-showsixmoveone .carousel-control.left {
          margin-left: 15px;
        }
        .carousel-showsixmoveone .carousel-control.right {
          margin-right: 15px;
        }
        .carousel-showsixmoveone .cloneditem-1,
        .carousel-showsixmoveone .cloneditem-2,
        .carousel-showsixmoveone .cloneditem-3,
        .carousel-showsixmoveone .cloneditem-4,
        .carousel-showsixmoveone .cloneditem-5 {
          display: none;
        }
        @media all and (min-width: 768px) {
          .carousel-showsixmoveone .carousel-inner > .active.left,
          .carousel-showsixmoveone .carousel-inner > .prev {
            left: -33.333%;
          }
          .carousel-showsixmoveone .carousel-inner > .active.right,
          .carousel-showsixmoveone .carousel-inner > .next {
            left: 33.333%;
          }
          .carousel-showsixmoveone .carousel-inner > .left,
          .carousel-showsixmoveone .carousel-inner > .prev.right,
          .carousel-showsixmoveone .carousel-inner > .active {
            left: 0;
          }
          .carousel-showsixmoveone .carousel-inner .cloneditem-1,
          .carousel-showsixmoveone .carousel-inner .cloneditem-2 {
            display: block;
          }
        }
        @media all and (min-width: 768px) and (transform-3d),
        all and (min-width: 768px) and (-webkit-transform-3d) {
          .carousel-showsixmoveone .carousel-inner > .item.active.right,
          .carousel-showsixmoveone .carousel-inner > .item.next {
            -webkit-transform: translate3d(33.333%, 0, 0);
            transform: translate3d(33.333%, 0, 0);
            left: 0;
          }
          .carousel-showsixmoveone .carousel-inner > .item.active.left,
          .carousel-showsixmoveone .carousel-inner > .item.prev {
            -webkit-transform: translate3d(-33.333%, 0, 0);
            transform: translate3d(-33.333%, 0, 0);
            left: 0;
          }
          .carousel-showsixmoveone .carousel-inner > .item.left,
          .carousel-showsixmoveone .carousel-inner > .item.prev.right,
          .carousel-showsixmoveone .carousel-inner > .item.active {
            -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
            left: 0;
          }
        }
        @media all and (min-width: 992px) {
          .carousel-showsixmoveone .carousel-inner > .active.left,
          .carousel-showsixmoveone .carousel-inner > .prev {
            left: -16.666%;
          }
          .carousel-showsixmoveone .carousel-inner > .active.right,
          .carousel-showsixmoveone .carousel-inner > .next {
            left: 16.666%;
          }
          .carousel-showsixmoveone .carousel-inner > .left,
          .carousel-showsixmoveone .carousel-inner > .prev.right,
          .carousel-showsixmoveone .carousel-inner > .active {
            left: 0;
          }
          .carousel-showsixmoveone .carousel-inner .cloneditem-3,
          .carousel-showsixmoveone .carousel-inner .cloneditem-4,
          .carousel-showsixmoveone .carousel-inner .cloneditem-5 {
            display: block;
          }
        }
        @media all and (min-width: 992px) and (transform-3d),
        all and (min-width: 992px) and (-webkit-transform-3d) {
          .carousel-showsixmoveone .carousel-inner > .item.active.right,
          .carousel-showsixmoveone .carousel-inner > .item.next {
            -webkit-transform: translate3d(16.666%, 0, 0);
            transform: translate3d(16.666%, 0, 0);
            left: 0;
          }
          .carousel-showsixmoveone .carousel-inner > .item.active.left,
          .carousel-showsixmoveone .carousel-inner > .item.prev {
            -webkit-transform: translate3d(-16.666%, 0, 0);
            transform: translate3d(-16.666%, 0, 0);
            left: 0;
          }
          .carousel-showsixmoveone .carousel-inner > .item.left,
          .carousel-showsixmoveone .carousel-inner > .item.prev.right,
          .carousel-showsixmoveone .carousel-inner > .item.active {
            -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
            left: 0;
          }
        }

<!-- begin snippet: js hide: false console: true -->
<!--html-->
<div class="row ">
  <div class="col-md-12">
    <div class="carousel carousel-showsixmoveone slide" id="chocolatelist" data-interval="30000">
      <div class="carousel-inner">
        <div class="item active">
          <div class="col-xs-12 col-sm-4 col-md-2">
            <a href="#">
              <img src="http://placehold.it/500/0054A6/fff/&amp;text=1" class="img-responsive">
            </a>
          </div>
          <div class="col-xs-12 col-sm-4 col-md-2 cloneditem-1">
            <a href="#">
              <img src="http://placehold.it/500/002d5a/fff/&amp;text=2" class="img-responsive">
            </a>
          </div>
          <div class="col-xs-12 col-sm-4 col-md-2 cloneditem-2">
            <a href="#">
              <img src="http://placehold.it/500/d6d6d6/333&amp;text=3" class="img-responsive">
            </a>
          </div>
          <div class="col-xs-12 col-sm-4 col-md-2 cloneditem-3">
            <a href="#">
              <img src="http://placehold.it/500/002040/eeeeee&amp;text=4" class="img-responsive">
            </a>
          </div>
          <div class="col-xs-12 col-sm-4 col-md-2 cloneditem-4">
            <a href="#">
              <img src="http://placehold.it/500/0054A6/fff/&amp;text=5" class="img-responsive">
            </a>
          </div>
          <div class="col-xs-12 col-sm-4 col-md-2 cloneditem-5">
            <a href="#">
              <img src="http://placehold.it/500/002d5a/fff/&amp;text=6" class="img-responsive">
            </a>
          </div>
        </div>
        <div class="item">
          <div class="col-xs-12 col-sm-4 col-md-2">
            <a href="#">
              <img src="http://placehold.it/500/002d5a/fff/&amp;text=2" class="img-responsive">
            </a>
          </div>
          <div class="col-xs-12 col-sm-4 col-md-2 cloneditem-1">
            <a href="#">
              <img src="http://placehold.it/500/d6d6d6/333&amp;text=3" class="img-responsive">
            </a>
          </div>
          <div class="col-xs-12 col-sm-4 col-md-2 cloneditem-2">
            <a href="#">
              <img src="http://placehold.it/500/002040/eeeeee&amp;text=4" class="img-responsive">
            </a>
          </div>
          <div class="col-xs-12 col-sm-4 col-md-2 cloneditem-3">
            <a href="#">
              <img src="http://placehold.it/500/0054A6/fff/&amp;text=5" class="img-responsive">
            </a>
          </div>
          <div class="col-xs-12 col-sm-4 col-md-2 cloneditem-4">
            <a href="#">
              <img src="http://placehold.it/500/002d5a/fff/&amp;text=6" class="img-responsive">
            </a>
          </div>
          <div class="col-xs-12 col-sm-4 col-md-2 cloneditem-5">
            <a href="#">
              <img src="http://placehold.it/500/eeeeee&amp;text=7" class="img-responsive">
            </a>
          </div>
        </div>
        <div class="item">
          <div class="col-xs-12 col-sm-4 col-md-2">
            <a href="#">
              <img src="http://placehold.it/500/d6d6d6/333&amp;text=3" class="img-responsive">
            </a>
          </div>
          <div class="col-xs-12 col-sm-4 col-md-2 cloneditem-1">
            <a href="#">
              <img src="http://placehold.it/500/002040/eeeeee&amp;text=4" class="img-responsive">
            </a>
          </div>
          <div class="col-xs-12 col-sm-4 col-md-2 cloneditem-2">
            <a href="#">
              <img src="http://placehold.it/500/0054A6/fff/&amp;text=5" class="img-responsive">
            </a>
          </div>
          <div class="col-xs-12 col-sm-4 col-md-2 cloneditem-3">
            <a href="#">
              <img src="http://placehold.it/500/002d5a/fff/&amp;text=6" class="img-responsive">
            </a>
          </div>
          <div class="col-xs-12 col-sm-4 col-md-2 cloneditem-4">
            <a href="#">
              <img src="http://placehold.it/500/eeeeee&amp;text=7" class="img-responsive">
            </a>
          </div>
          <div class="col-xs-12 col-sm-4 col-md-2 cloneditem-5">
            <a href="#">
              <img src="http://placehold.it/500/40a1ff/002040&amp;text=8" class="img-responsive">
            </a>
          </div>
        </div>
        <div class="item">
          <div class="col-xs-12 col-sm-4 col-md-2">
            <a href="#">
              <img src="http://placehold.it/500/002040/eeeeee&amp;text=4" class="img-responsive">
            </a>
          </div>
          <div class="col-xs-12 col-sm-4 col-md-2 cloneditem-1">
            <a href="#">
              <img src="http://placehold.it/500/0054A6/fff/&amp;text=5" class="img-responsive">
            </a>
          </div>
          <div class="col-xs-12 col-sm-4 col-md-2 cloneditem-2">
            <a href="#">
              <img src="http://placehold.it/500/002d5a/fff/&amp;text=6" class="img-responsive">
            </a>
          </div>
          <div class="col-xs-12 col-sm-4 col-md-2 cloneditem-3">
            <a href="#">
              <img src="http://placehold.it/500/eeeeee&amp;text=7" class="img-responsive">
            </a>
          </div>
          <div class="col-xs-12 col-sm-4 col-md-2 cloneditem-4">
            <a href="#">
              <img src="http://placehold.it/500/40a1ff/002040&amp;text=8" class="img-responsive">
            </a>
          </div>
          <div class="col-xs-12 col-sm-4 col-md-2 cloneditem-5">
            <a href="#">
              <img src="http://placehold.it/500/0054A6/fff/&amp;text=1" class="img-responsive">
            </a>
          </div>
        </div>
        <div class="item">
          <div class="col-xs-12 col-sm-4 col-md-2">
            <a href="#">
              <img src="http://placehold.it/500/0054A6/fff/&amp;text=5" class="img-responsive">
            </a>
          </div>
          <div class="col-xs-12 col-sm-4 col-md-2 cloneditem-1">
            <a href="#">
              <img src="http://placehold.it/500/002d5a/fff/&amp;text=6" class="img-responsive">
            </a>
          </div>
          <div class="col-xs-12 col-sm-4 col-md-2 cloneditem-2">
            <a href="#">
              <img src="http://placehold.it/500/eeeeee&amp;text=7" class="img-responsive">
            </a>
          </div>
          <div class="col-xs-12 col-sm-4 col-md-2 cloneditem-3">
            <a href="#">
              <img src="http://placehold.it/500/40a1ff/002040&amp;text=8" class="img-responsive">
            </a>
          </div>
          <div class="col-xs-12 col-sm-4 col-md-2 cloneditem-4">
            <a href="#">
              <img src="http://placehold.it/500/0054A6/fff/&amp;text=1" class="img-responsive">
            </a>
          </div>
          <div class="col-xs-12 col-sm-4 col-md-2 cloneditem-5">
            <a href="#">
              <img src="http://placehold.it/500/002d5a/fff/&amp;text=2" class="img-responsive">
            </a>
          </div>
        </div>
        <div class="item">
          <div class="col-xs-12 col-sm-4 col-md-2">
            <a href="#">
              <img src="http://placehold.it/500/002d5a/fff/&amp;text=6" class="img-responsive">
            </a>
          </div>
          <div class="col-xs-12 col-sm-4 col-md-2 cloneditem-1">
            <a href="#">
              <img src="http://placehold.it/500/eeeeee&amp;text=7" class="img-responsive">
            </a>
          </div>
          <div class="col-xs-12 col-sm-4 col-md-2 cloneditem-2">
            <a href="#">
              <img src="http://placehold.it/500/40a1ff/002040&amp;text=8" class="img-responsive">
            </a>
          </div>
          <div class="col-xs-12 col-sm-4 col-md-2 cloneditem-3">
            <a href="#">
              <img src="http://placehold.it/500/0054A6/fff/&amp;text=1" class="img-responsive">
            </a>
          </div>
          <div class="col-xs-12 col-sm-4 col-md-2 cloneditem-4">
            <a href="#">
              <img src="http://placehold.it/500/002d5a/fff/&amp;text=2" class="img-responsive">
            </a>
          </div>
          <div class="col-xs-12 col-sm-4 col-md-2 cloneditem-5">
            <a href="#">
              <img src="http://placehold.it/500/d6d6d6/333&amp;text=3" class="img-responsive">
            </a>
          </div>
        </div>
        <div class="item">
          <div class="col-xs-12 col-sm-4 col-md-2">
            <a href="#">
              <img src="http://placehold.it/500/eeeeee&amp;text=7" class="img-responsive">
            </a>
          </div>
          <div class="col-xs-12 col-sm-4 col-md-2 cloneditem-1">
            <a href="#">
              <img src="http://placehold.it/500/40a1ff/002040&amp;text=8" class="img-responsive">
            </a>
          </div>
          <div class="col-xs-12 col-sm-4 col-md-2 cloneditem-2">
            <a href="#">
              <img src="http://placehold.it/500/0054A6/fff/&amp;text=1" class="img-responsive">
            </a>
          </div>
          <div class="col-xs-12 col-sm-4 col-md-2 cloneditem-3">
            <a href="#">
              <img src="http://placehold.it/500/002d5a/fff/&amp;text=2" class="img-responsive">
            </a>
          </div>
          <div class="col-xs-12 col-sm-4 col-md-2 cloneditem-4">
            <a href="#">
              <img src="http://placehold.it/500/d6d6d6/333&amp;text=3" class="img-responsive">
            </a>
          </div>
          <div class="col-xs-12 col-sm-4 col-md-2 cloneditem-5">
            <a href="#">
              <img src="http://placehold.it/500/002040/eeeeee&amp;text=4" class="img-responsive">
            </a>
          </div>
        </div>
        <div class="item">
          <div class="col-xs-12 col-sm-4 col-md-2">
            <a href="#">
              <img src="http://placehold.it/500/40a1ff/002040&amp;text=8" class="img-responsive">
            </a>
          </div>
          <div class="col-xs-12 col-sm-4 col-md-2 cloneditem-1">
            <a href="#">
              <img src="http://placehold.it/500/0054A6/fff/&amp;text=1" class="img-responsive">
            </a>
          </div>
          <div class="col-xs-12 col-sm-4 col-md-2 cloneditem-2">
            <a href="#">
              <img src="http://placehold.it/500/002d5a/fff/&amp;text=2" class="img-responsive">
            </a>
          </div>
          <div class="col-xs-12 col-sm-4 col-md-2 cloneditem-3">
            <a href="#">
              <img src="http://placehold.it/500/d6d6d6/333&amp;text=3" class="img-responsive">
            </a>
          </div>
          <div class="col-xs-12 col-sm-4 col-md-2 cloneditem-4">
            <a href="#">
              <img src="http://placehold.it/500/002040/eeeeee&amp;text=4" class="img-responsive">
            </a>
          </div>
          <div class="col-xs-12 col-sm-4 col-md-2 cloneditem-5">
            <a href="#">
              <img src="http://placehold.it/500/0054A6/fff/&amp;text=5" class="img-responsive">
            </a>
          </div>
        </div>
      </div>
      <a class="left carousel-control" href="#chocolatelist" data-slide="prev"><i class="glyphicon glyphicon-chevron-left "></i></a>
      <a class="right carousel-control" href="#chocolatelist" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
    </div>
  </div>
</div>

paste this code you will get some clue.image link of carousel slide

Try this code


 <div id="recommended-item-carousel" class="carousel slide" data-ride="carousel">
    <div class="carousel-inner">
        <div class="item active">

            <div class="col-sm-3">
                <div class="product-image-wrapper">
                    <div class="single-products">
                        <div class="productinfo text-center">
                            <img src="img/home/recommend1.jpg" alt="" />
                            <h2>$56</h2>
                            <p>
                                Easy Polo Black Edition
                            </p>
                            <a href="#" class="btn btn-default add-to-cart"><i class="fa fa-shopping-cart"></i>Add to cart</a>
                        </div>

                    </div>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="product-image-wrapper">
                    <div class="single-products">
                        <div class="productinfo text-center">
                            <img src="img/home/recommend2.jpg" alt="" />
                            <h2>$56</h2>
                            <p>
                                Easy Polo Black Edition
                            </p>
                            <a href="#" class="btn btn-default add-to-cart"><i class="fa fa-shopping-cart"></i>Add to cart</a>
                        </div>

                    </div>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="product-image-wrapper">
                    <div class="single-products">
                        <div class="productinfo text-center">
                            <img src="img/home/recommend3.jpg" alt="" />
                            <h2>$56</h2>
                            <p>
                                Easy Polo Black Edition
                            </p>
                            <a href="#" class="btn btn-default add-to-cart"><i class="fa fa-shopping-cart"></i>Add to cart</a>
                        </div>

                    </div>
                </div>
            </div>
        </div>
        <div class="item">
            <div class="col-sm-3">
                <div class="product-image-wrapper">
                    <div class="single-products">
                        <div class="productinfo text-center">
                            <img src="img/home/recommend1.jpg" alt="" />
                            <h2>$56</h2>
                            <p>
                                Easy Polo Black Edition
                            </p>
                            <a href="#" class="btn btn-default add-to-cart"><i class="fa fa-shopping-cart"></i>Add to cart</a>
                        </div>

                    </div>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="product-image-wrapper">
                    <div class="single-products">
                        <div class="productinfo text-center">
                            <img src="img/home/recommend2.jpg" alt="" />
                            <h2>$56</h2>
                            <p>
                                Easy Polo Black Edition
                            </p>
                            <a href="#" class="btn btn-default add-to-cart"><i class="fa fa-shopping-cart"></i>Add to cart</a>
                        </div>

                    </div>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="product-image-wrapper">
                    <div class="single-products">
                        <div class="productinfo text-center">
                            <img src="img/home/recommend3.jpg" alt="" />
                            <h2>$56</h2>
                            <p>
                                Easy Polo Black Edition
                            </p>
                            <a href="#" class="btn btn-default add-to-cart"><i class="fa fa-shopping-cart"></i>Add to cart</a>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
    <a class="left recommended-item-control" href="#recommended-item-carousel" data-slide="prev"> <i class="fa fa-angle-left"></i> </a>
    <a class="right recommended-item-control" href="#recommended-item-carousel" data-slide="next"> <i class="fa fa-angle-right"></i> </a>
</div>

I've seen your question and answers, and made a new responsive and flexible multi items carousel Gist. you can see it here:

https://gist.github.com/IVIR3zaM/d143a361e61459146ae7c68ce86b066e

You can add multiple li in ol tag that has attribute as class with value "carousel-indicators" and with data-slide-to has sequential values like 0 to 6 or 0 to 9.

than you just need to copy and paste the div which has attribute as class with value "item".

This works for me.

<div data-ride="carousel" class="carousel slide" id="myCarousel">
    <!-- Indicators -->
    <ol class="carousel-indicators">
        <li class="" data-slide-to="0" data-target="#myCarousel"></li>
        <li data-slide-to="1" data-target="#myCarousel" class=""></li>
        <li data-slide-to="2" data-target="#myCarousel" class="active"></li>
        <li data-slide-to="3" data-target="#myCarousel" class=""></li>
        <li data-slide-to="4" data-target="#myCarousel" class=""></li>
        <li data-slide-to="5" data-target="#myCarousel" class=""></li>
        <li data-slide-to="6" data-target="#myCarousel" class=""></li>
    </ol>
    <div role="listbox" class="carousel-inner">
        <div class="item active">
            <img alt="First slide" src="images/carousel/11.jpg"
                class="first-slide">
        </div>
        <div class="item">
            <img alt="Second slide" src="images/carousel/22.jpg"
                class="second-slide">
        </div>
        <div class="item">
            <img alt="Third slide" src="images/carousel/33.jpg"
                class="third-slide">
        </div>
        <div class="item">
            <img alt="Third slide" src="images/carousel/44.jpeg"
                class="fourth-slide">
        </div>
        <div class="item">
            <img alt="Third slide" src="images/carousel/55.jpg"
                class="third-slide">
        </div>
        <div class="item">
            <img alt="Third slide" src="images/carousel/66.jpg"
                class="third-slide">
        </div>
        <div class="item">
            <img alt="Third slide" src="images/carousel/77.jpg"
                class="third-slide">
        </div>
    </div>
    <a data-slide="prev" role="button" href="#myCarousel"
        class="left carousel-control"> <span aria-hidden="true"
        class="glyphicon glyphicon-chevron-left"></span> <span
        class="sr-only">Previous</span>
    </a> <a data-slide="next" role="button" href="#myCarousel"
        class="right carousel-control"> <span aria-hidden="true"
        class="glyphicon glyphicon-chevron-right"></span> <span
        class="sr-only">Next</span>
    </a>
</div>

Reference to above link i added 1 new thing called show 4 at time, slide one at a time for bootstrap 3 (v3.3.7)

CODEPLY:- https://www.codeply.com/go/eWUbGlspqU

LIVE SNIPPET

(function(){
  $('#carousel123').carousel({ interval: 2000 });
}());

(function(){
  $('.carousel-showmanymoveone .item').each(function(){
    var itemToClone = $(this);

    for (var i=1;i<4;i++) {
      itemToClone = itemToClone.next();

      // wrap around if at end of item collection
      if (!itemToClone.length) {
        itemToClone = $(this).siblings(':first');
      }

      // grab item, clone, add marker class, add to collection
      itemToClone.children(':first-child').clone()
        .addClass("cloneditem-"+(i))
        .appendTo($(this));
    }
  });
}());
body {
    margin-top: 50px;
}

.carousel-showmanymoveone .carousel-control {
  width: 4%;
  background-image: none;
}
.carousel-showmanymoveone .carousel-control.left {
  margin-left: 15px;
}
.carousel-showmanymoveone .carousel-control.right {
  margin-right: 15px;
}
.carousel-showmanymoveone .cloneditem-1,
.carousel-showmanymoveone .cloneditem-2,
.carousel-showmanymoveone .cloneditem-3 {
  display: none;
}
@media all and (min-width: 768px) {
  .carousel-showmanymoveone .carousel-inner > .active.left,
  .carousel-showmanymoveone .carousel-inner > .prev {
    left: -50%;
  }
  .carousel-showmanymoveone .carousel-inner > .active.right,
  .carousel-showmanymoveone .carousel-inner > .next {
    left: 50%;
  }
  .carousel-showmanymoveone .carousel-inner > .left,
  .carousel-showmanymoveone .carousel-inner > .prev.right,
  .carousel-showmanymoveone .carousel-inner > .active {
    left: 0;
  }
  .carousel-showmanymoveone .carousel-inner .cloneditem-1 {
    display: block;
  }
}
@media all and (min-width: 768px) and (transform-3d), all and (min-width: 768px) and (-webkit-transform-3d) {
  .carousel-showmanymoveone .carousel-inner > .item.active.right,
  .carousel-showmanymoveone .carousel-inner > .item.next {
    -webkit-transform: translate3d(50%, 0, 0);
            transform: translate3d(50%, 0, 0);
    left: 0;
  }
  .carousel-showmanymoveone .carousel-inner > .item.active.left,
  .carousel-showmanymoveone .carousel-inner > .item.prev {
    -webkit-transform: translate3d(-50%, 0, 0);
            transform: translate3d(-50%, 0, 0);
    left: 0;
  }
  .carousel-showmanymoveone .carousel-inner > .item.left,
  .carousel-showmanymoveone .carousel-inner > .item.prev.right,
  .carousel-showmanymoveone .carousel-inner > .item.active {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
    left: 0;
  }
}
@media all and (min-width: 992px) {
  .carousel-showmanymoveone .carousel-inner > .active.left,
  .carousel-showmanymoveone .carousel-inner > .prev {
    left: -25%;
  }
  .carousel-showmanymoveone .carousel-inner > .active.right,
  .carousel-showmanymoveone .carousel-inner > .next {
    left: 25%;
  }
  .carousel-showmanymoveone .carousel-inner > .left,
  .carousel-showmanymoveone .carousel-inner > .prev.right,
  .carousel-showmanymoveone .carousel-inner > .active {
    left: 0;
  }
  .carousel-showmanymoveone .carousel-inner .cloneditem-2,
  .carousel-showmanymoveone .carousel-inner .cloneditem-3 {
    display: block;
  }
}
@media all and (min-width: 992px) and (transform-3d), all and (min-width: 992px) and (-webkit-transform-3d) {
  .carousel-showmanymoveone .carousel-inner > .item.active.right,
  .carousel-showmanymoveone .carousel-inner > .item.next {
    -webkit-transform: translate3d(25%, 0, 0);
            transform: translate3d(25%, 0, 0);
    left: 0;
  }
  .carousel-showmanymoveone .carousel-inner > .item.active.left,
  .carousel-showmanymoveone .carousel-inner > .item.prev {
    -webkit-transform: translate3d(-25%, 0, 0);
            transform: translate3d(-25%, 0, 0);
    left: 0;
  }
  .carousel-showmanymoveone .carousel-inner > .item.left,
  .carousel-showmanymoveone .carousel-inner > .item.prev.right,
  .carousel-showmanymoveone .carousel-inner > .item.active {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
    left: 0;
  }
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div class="carousel carousel-showmanymoveone slide" id="carousel123">
	<div class="carousel-inner">
		<div class="item active">
			<div class="col-xs-12 col-sm-6 col-md-3"><a href="#"><img src="http://placehold.it/500/0054A6/fff/&amp;text=1" class="img-responsive"></a></div>
		</div>
		<div class="item">
			<div class="col-xs-12 col-sm-6 col-md-3"><a href="#"><img src="http://placehold.it/500/002d5a/fff/&amp;text=2" class="img-responsive"></a></div>
		</div>
		<div class="item">
			<div class="col-xs-12 col-sm-6 col-md-3"><a href="#"><img src="http://placehold.it/500/d6d6d6/333&amp;text=3" class="img-responsive"></a></div>
		</div>          
		<div class="item">
			<div class="col-xs-12 col-sm-6 col-md-3"><a href="#"><img src="http://placehold.it/500/002040/eeeeee&amp;text=4" class="img-responsive"></a></div>
		</div>
		<div class="item">
			<div class="col-xs-12 col-sm-6 col-md-3"><a href="#"><img src="http://placehold.it/500/0054A6/fff/&amp;text=5" class="img-responsive"></a></div>
		</div>
		<div class="item">
			<div class="col-xs-12 col-sm-6 col-md-3"><a href="#"><img src="http://placehold.it/500/002d5a/fff/&amp;text=6" class="img-responsive"></a></div>
		</div>
		<div class="item">
			<div class="col-xs-12 col-sm-6 col-md-3"><a href="#"><img src="http://placehold.it/500/eeeeee&amp;text=7" class="img-responsive"></a></div>
		</div>
		<div class="item">
			<div class="col-xs-12 col-sm-6 col-md-3"><a href="#"><img src="http://placehold.it/500/40a1ff/002040&amp;text=8" class="img-responsive"></a></div>
		</div>
	</div>
	<a class="left carousel-control" href="#carousel123" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
	<a class="right carousel-control" href="#carousel123" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
</div>

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top