multiple item slider responsive

3/31/2017 - 3:12 PM

multiple item slider responsive

(function() {
  // setup your carousels as you normally would using JS
  // or via data attributes according to the documentation
  // http://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));
    }
  });
}());

slider_multi-items.html

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>


<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-xxs-12 col-xs-6 col-sm-4 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-xxs-12 col-xs-6 col-sm-4 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-xxs-12 col-xs-6 col-sm-4 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-xxs-12 col-xs-6 col-sm-4 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-xxs-12 col-xs-6 col-sm-4 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-xxs-12 col-xs-6 col-sm-4 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-xxs-12 col-xs-6 col-sm-4 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-xxs-12 col-xs-6 col-sm-4 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" data-target="#carousel123" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
      <a class="right carousel-control" data-target="#carousel123" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
    </div>
  </div>
</div>

slider_multi-items.css

.carousel-showsixmoveone .carousel-inner > .active.left,
.carousel-showsixmoveone .carousel-inner > .prev {
  left: -25%;
}

.carousel-showsixmoveone .carousel-inner > .active.right,
.carousel-showsixmoveone .carousel-inner > .next {
  left: 25%;
}

.carousel-showsixmoveone .carousel-inner > .left,
.carousel-showsixmoveone .carousel-inner > .prev.right,
.carousel-showsixmoveone .carousel-inner > .active {
  left: 0;
}

.carousel-showsixmoveone .cloneditem-4,
.carousel-showsixmoveone .cloneditem-5 {
  display: none;
}

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

.carousel-showsixmoveone .carousel-inner > .item.active.left,
.carousel-showsixmoveone .carousel-inner > .item.prev {
  -webkit-transform: translate3d(-25%, 0, 0);
  -moz-transform: translate3d(-25%, 0, 0);
  -ms-transform: translate3d(-25%, 0, 0);
  -o-transform: translate3d(-25%, 0, 0);
  transform: translate3d(-25%, 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);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  left: 0;
}


/*=========================================================================================================================================================================
------------------------------------------------------------------------------------media querues--------------------------------------------------------------------------
===========================================================================================================================================================================*/


/*==========  Non-Mobile First Method  ==========*/

@media (min-width: 769px) {
  /*form hover on main menu*/
  ul.nav li.dropdown:hover > ul.dropdown-menu {
    display: block;
  }
}


/* Large Devices, Wide Screens */

@media only screen and (max-width: 1200px) {
  .carousel-showsixmoveone .carousel-inner > .active.left,
  .carousel-showsixmoveone .carousel-inner > .prev {
    left: -25%;
  }
  .carousel-showsixmoveone .carousel-inner > .active.right,
  .carousel-showsixmoveone .carousel-inner > .next {
    left: 25%;
  }
  .carousel-showsixmoveone .carousel-inner > .left,
  .carousel-showsixmoveone .carousel-inner > .prev.right,
  .carousel-showsixmoveone .carousel-inner > .active {
    left: 0;
  }
  .carousel-showsixmoveone .cloneditem-4,
  .carousel-showsixmoveone .cloneditem-5 {
    display: none;
  }
  .carousel-showsixmoveone .carousel-inner > .item.active.right,
  .carousel-showsixmoveone .carousel-inner > .item.next {
    -webkit-transform: translate3d(25%, 0, 0);
    -moz-transform: translate3d(25%, 0, 0);
    -ms-transform: translate3d(25%, 0, 0);
    -o-transform: translate3d(25%, 0, 0);
    transform: translate3d(25%, 0, 0);
    left: 0;
  }
  .carousel-showsixmoveone .carousel-inner > .item.active.left,
  .carousel-showsixmoveone .carousel-inner > .item.prev {
    -webkit-transform: translate3d(-25%, 0, 0);
    -moz-transform: translate3d(-25%, 0, 0);
    -ms-transform: translate3d(-25%, 0, 0);
    -o-transform: translate3d(-25%, 0, 0);
    transform: translate3d(-25%, 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);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    left: 0;
  }
}


/* Medium Devices, Desktops */

@media only screen and (max-width: 992px) {
  .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-3,
  .carousel-showsixmoveone .carousel-inner .cloneditem-4,
  .carousel-showsixmoveone .carousel-inner .cloneditem-5,
  .carousel-showsixmoveone .carousel-inner .cloneditem-6 {
    display: none;
  }
  .carousel-showsixmoveone .carousel-inner > .item.active.right,
  .carousel-showsixmoveone .carousel-inner > .item.next {
    -webkit-transform: translate3d(33.333%, 0, 0);
    -moz-transform: translate3d(33.333%, 0, 0);
    -ms-transform: translate3d(33.333%, 0, 0);
    -o-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);
    -moz-transform: translate3d(-33.333%, 0, 0);
    -ms-transform: translate3d(-33.333%, 0, 0);
    -o-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);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    left: 0;
  }
}


/* Small Devices, Tablets */

@media only screen and (max-width: 768px) {
  .carousel-showsixmoveone .carousel-inner > .active.left,
  .carousel-showsixmoveone .carousel-inner > .prev {
    left: -50%;
  }
  .carousel-showsixmoveone .carousel-inner > .active.right,
  .carousel-showsixmoveone .carousel-inner > .next {
    left: 50%;
  }
  .carousel-showsixmoveone .carousel-inner > .left,
  .carousel-showsixmoveone .carousel-inner > .prev.right,
  .carousel-showsixmoveone .carousel-inner > .active {
    left: 0;
  }
  .carousel-showsixmoveone .carousel-inner .cloneditem-2,
  .carousel-showsixmoveone .carousel-inner .cloneditem-3,
  .carousel-showsixmoveone .carousel-inner .cloneditem-4,
  .carousel-showsixmoveone .carousel-inner .cloneditem-5,
  .carousel-showsixmoveone .carousel-inner .cloneditem-6 {
    display: none;
  }
  .carousel-showsixmoveone .carousel-inner > .item.active.right,
  .carousel-showsixmoveone .carousel-inner > .item.next {
    -webkit-transform: translate3d(50%, 0, 0);
    -moz-transform: translate3d(50%, 0, 0);
    -ms-transform: translate3d(50%, 0, 0);
    -o-transform: translate3d(50%, 0, 0);
    transform: translate3d(50%, 0, 0);
    left: 0;
  }
  .carousel-showsixmoveone .carousel-inner > .item.active.left,
  .carousel-showsixmoveone .carousel-inner > .item.prev {
    -webkit-transform: translate3d(-50%, 0, 0);
    -moz-transform: translate3d(-50%, 0, 0);
    -ms-transform: translate3d(-50%, 0, 0);
    -o-transform: translate3d(-50%, 0, 0);
    transform: translate3d(-50%, 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);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    left: 0;
  }
}


/* Extra Small Devices, Phones */

@media only screen and (max-width: 480px) {
  .col-xxs-12 {
    width: 100%!important;
    position: relative;
    min-height: 1px;
    padding-right: 15px;
  }
  .CollectionWrap {
    padding-top: 50%;
  }
  .carousel-showsixmoveone .carousel-inner > .active.left,
  .carousel-showsixmoveone .carousel-inner > .prev {
    left: 0;
  }
  .carousel-showsixmoveone .carousel-inner > .active.right,
  .carousel-showsixmoveone .carousel-inner > .next {
    left: 0;
  }
  .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,
  .carousel-showsixmoveone .carousel-inner .cloneditem-3,
  .carousel-showsixmoveone .carousel-inner .cloneditem-4,
  .carousel-showsixmoveone .carousel-inner .cloneditem-5,
  .carousel-showsixmoveone .carousel-inner .cloneditem-6 {
    display: none;
  }
  .carousel-showsixmoveone .carousel-inner > .item.active.right,
  .carousel-showsixmoveone .carousel-inner > .item.next {
    -webkit-transform: translate3d(100%, 0, 0);
    -moz-transform: translate3d(100%, 0, 0);
    -ms-transform: translate3d(100%, 0, 0);
    -o-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
    left: 0;
  }
  .carousel-showsixmoveone .carousel-inner > .item.active.left,
  .carousel-showsixmoveone .carousel-inner > .item.prev {
    -webkit-transform: translate3d(-100%, 0, 0);
    -moz-transform: translate3d(-100%, 0, 0);
    -ms-transform: translate3d(-100%, 0, 0);
    -o-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 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);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    left: 0;
  }
}

Cacher is the code snippet organizer for pro developers

We empower you and your team to get more done, faster

multiple item slider responsive