html Bootstrap show 4 advance 1

Posted 2021-05-11

				<div class="carousel carousel-showmanymoveone slide" id="carousel123" data-interval="5000">
					<div class="carousel-inner">
						<div class="item active">
							<div class="col-xs-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-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-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-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-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-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-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-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>
	//script for modified bootstrap carousel show 4 advance 1
	(function(){
		jQuery('.carousel-showmanymoveone .item').each(function(){
			var itemToClone = jQuery(this);

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

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

      // grab item, clone, add marker class, add to collection
      itemToClone.children(':first-child').clone()
      .addClass("cloneditem-"+(i))
      .appendTo(jQuery(this));
  }
});
	}());
</script>


/*Carousel for Featured clients - show 4 advance 1*/

.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;
	} <--this hides cloned items at mobile sizes if you use additional bootstrap classes*/
	@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;
		}
	}