Modify bootstrap carousel to display multiple slid

问题:

I'm wanting to modify bootstrap 3's carousel to display several slides at once. I know that I could put multiple thumbnails in a single slide (div .item) but the problem with that is that the carousel will slide past them all simultaneously moving on to the next group whereas I'm wanting to step through them one by one.

I've found an example of exactly what I want here: http://www.bootply.com/117282 The only problem with this is that I need 5 or 6 slides visible as oppose to 4. I've spent several hours attempting to modify this to work as desired but I clearly don't have a sufficient understanding of how it works.

My jquery/javascript understanding is pretty elementary but my CSS is pretty decent. Could someone show me how to modify this to display 5/6 slides simultaneously? I really appreciate the help.

Thanks, Sharma

回答1:

If you just want to overide this fiddle so :

1 : In JS : change for (var i=0;i<2;i++) { by for (var i=0;i<4;i++) {

2 : In HTML : change col-lg-3 (so 4 items) by col-lg-2 (so 6 items)

bootply : http://www.bootply.com/123662

回答2:

<!--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