"Infinite carousel (loop) multi-Item"
Bootstrap 4.0.0 Snippet by KreigD

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="3000" data-wrap="true"> <!--<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>--> <!--</ol>--> <div class="carousel-inner" role="listbox"> <div class="carousel-item active"> <div class="col-lg-4 col-xs-4 col-md-4 col-sm-4"> <img class="d-block img-fluid" src="http://placehold.it/800x600/f44242/fff" alt="First slide"> </div> </div> <div class="carousel-item"> <div class="col-lg-4 col-xs-4 col-md-4 col-sm-4"> <img class="d-block img-fluid" src="http://placehold.it/800x600/418cf4/fff" alt="Second slide"> </div> </div> <div class="carousel-item"> <div class="col-lg-4 col-xs-4 col-md-4 col-sm-4"> <img class="d-block img-fluid" src="http://placehold.it/800x600/3ed846/fff" alt="Third slide"> </div> </div> <div class="carousel-item"> <div class="col-lg-4 col-xs-4 col-md-4 col-sm-4"> <img class="d-block img-fluid" src="http://placehold.it/800x600/42ebf4/000" alt="Fourth slide"> </div> </div> <div class="carousel-item"> <div class="col-lg-4 col-xs-4 col-md-4 col-sm-4"> <img class="d-block img-fluid" src="http://placehold.it/800x600/f49b41/000" alt="Fifth slide"> </div> </div> <div class="carousel-item"> <div class="col-lg-4 col-xs-4 col-md-4 col-sm-4"> <img class="d-block img-fluid" src="http://placehold.it/800x600/f4f141/000" alt="Sixth slide"> </div> </div> <div class="carousel-item"> <div class="col-lg-4 col-xs-4 col-md-4 col-sm-4"> <img class="d-block img-fluid" src="http://placehold.it/800x600/8e41f4/fff" alt="Seventh slide"> </div> </div> </div> <a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> </div>
/*This is just style for my particular carousel. Change this to fit your project.*/ .carousel { max-width: 800px; height: auto; margin: 0 auto; } /*These are the core functionality styles. Keep these until you understand how to modify*/ /*.carousel-inner .active .carousel-control-prev {*/ /* left: -33%;*/ /*}*/ /*.carousel-inner .carousel-control-next {*/ /* left: 33%; */ /*}*/ /*.carousel-inner .carousel-control-prev {*/ /* left: -33%;*/ /*}*/ /*.carousel-control-prev,*/ /*.carousel-control-next {*/ /* background-image:none;*/ /*}*/ /*.carousel-item:not(.prev) {*/ /* visibility: visible;*/ /*}*/ /*.carousel-item.carousel-control-next:not(.prev) {*/ /* visibility: hidden;*/ /*}*/ /*.rightest{ */ /* visibility: visible;*/ /*}*/ /*Take 2*/ .carousel-inner > .carousel-item { -webkit-transition: 500ms ease-in-out left; transition: 500ms ease-in-out left; } .carousel-inner .active.left { left: -33%; } .carousel-inner .active.right { left: 33%; } .carousel-inner .next { left: 33%; } .carousel-inner .prev { left: -33%; } @media all and (transform-3d), (-webkit-transform-3d) { .carousel-inner > .carousel-item { -webkit-transition: 500ms ease-in-out left; transition: 500ms ease-in-out left; -webkit-transition: 500ms ease-in-out all; transition: 500ms ease-in-out all; -webkit-backface-visibility: visible; backface-visibility: visible; -webkit-transform: none!important; transform: none!important; } }
// $('#myCarousel').carousel({ // interval: 40000 // }); // $('.carousel .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)).addClass('rightest'); // } // else { // $(this).siblings(':first').children(':first-child').clone().appendTo($(this)); // } // }); //Take 2 // Instantiate the Bootstrap carousel $('#myCarousel').carousel({ interval: false }); // for every slide in carousel, copy the next slide's item in the slide. // Do the same for the next, next item. $('.carousel .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)); } });

Related: See More


Questions / Comments: