jcadima
7/20/2018 - 9:25 PM

Bootstrap show six, slide by one

html_6
content_copyfile_download

https://github.com/rtpHarry/Bootstrap3-ShowManySlideOneCarousel/wiki/Change-the-number-of-slides-visible-at-any-one-time

https://codepen.io/rtpHarry/pen/ogVord

https://stackoverflow.com/questions/48493309/carousel-thumb-slider-stop-clone-when-item-less-than-3

http://jsfiddle.net/0bwnqahj/1/

<link href="https://fonts.googleapis.com/css?family=Open+Sans|Bitter" rel="stylesheet" type="text/css">
<div class="container">
  <div class="row header-row">
    <div class="col-md-offset-2 col-md-8 title">
      <img alt="" class="img-responsive logo" src="//static.rtpdesign.co.uk/blog/img/blog-logo.png">
      <h1>Bootstrap 3 Show Many Slide One Carousel - Wiki Tutorial</h1>
          <p>Note: This is not the main code sample. It is a modified version of the original to accompany <a href="https://github.com/rtpHarry/Bootstrap3-ShowManySlideOneCarousel/wiki/Change-the-number-of-slides-visible-at-any-one-time">this wiki article</a>. Find out more about <a href="https://github.com/rtpHarry/Bootstrap3-ShowManySlideOneCarousel">the original code sample here</a>.</p>
    </div>    
  </div>
  <div class="row">
    <div class="col-md-12">
      <div class="carousel carousel-showsixmoveone slide" id="carousel123">
        <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>
          <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>
          <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>          
          <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>
          <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>
          <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>
          <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>
          <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>
        </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>
    </div>
  </div>
</div>
js_6
content_copyfile_download
(function(){
  // setup your carousels as you normally would using JS
  // or via data attributes according to the documentation
  // https://getbootstrap.com/javascript/#carousel
  $('#carousel123').carousel({ interval: 2000 });
  $('#carouselABC').carousel({ interval: 3600 });
}());

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

    for (var i=1;i<6;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));
    }
  });
}());
css_6
content_copyfile_download
.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;
  }
}