"bootstrap 4 multiple carousel "
Bootstrap 4.0.0 Snippet by krzych756

<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-fluid"> <div id="carouselExample" class="carousel slide" data-ride="carousel" data-interval="9000"> <div class="carousel-inner row w-100 mx-auto" role="listbox"> <div class="carousel-item col-md-3 active"> <div class="panel panel-default"> <div class="panel-thumbnail"> <a href="#" title="image 1" class="thumb"> <img class="img-fluid mx-auto d-block" src="//via.placeholder.com/600x400?text=1" alt="slide 1"> </a> </div> </div> </div> <div class="carousel-item col-md-3 "> <div class="panel panel-default"> <div class="panel-thumbnail"> <a href="#" title="image 3" class="thumb"> <img class="img-fluid mx-auto d-block" src="//via.placeholder.com/600x400?text=2" alt="slide 2"> </a> </div> </div> </div> <div class="carousel-item col-md-3 "> <div class="panel panel-default"> <div class="panel-thumbnail"> <a href="#" title="image 4" class="thumb"> <img class="img-fluid mx-auto d-block" src="//via.placeholder.com/600x400?text=3" alt="slide 3"> </a> </div> </div> </div> <div class="carousel-item col-md-3 "> <div class="panel panel-default"> <div class="panel-thumbnail"> <a href="#" title="image 5" class="thumb"> <img class="img-fluid mx-auto d-block" src="//via.placeholder.com/600x400?text=4" alt="slide 4"> </a> </div> </div> </div> <div class="carousel-item col-md-3 "> <div class="panel panel-default"> <div class="panel-thumbnail"> <a href="#" title="image 6" class="thumb"> <img class="img-fluid mx-auto d-block" src="//via.placeholder.com/600x400?text=5" alt="slide 5"> </a> </div> </div> </div> <div class="carousel-item col-md-3 "> <div class="panel panel-default"> <div class="panel-thumbnail"> <a href="#" title="image 7" class="thumb"> <img class="img-fluid mx-auto d-block" src="//via.placeholder.com/600x400?text=6" alt="slide 6"> </a> </div> </div> </div> <div class="carousel-item col-md-3 "> <div class="panel panel-default"> <div class="panel-thumbnail"> <a href="#" title="image 8" class="thumb"> <img class="img-fluid mx-auto d-block" src="//via.placeholder.com/600x400?text=7" alt="slide 7"> </a> </div> </div> </div> <div class="carousel-item col-md-3 "> <div class="panel panel-default"> <div class="panel-thumbnail"> <a href="#" title="image 2" class="thumb"> <img class="img-fluid mx-auto d-block" src="//via.placeholder.com/600x400?text=8" alt="slide 8"> </a> </div> </div> </div> </div> <a class="carousel-control-prev" href="#carouselExample" 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 text-faded" href="#carouselExample" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> </div>
@media (min-width: 768px) { /* show 3 items */ .carousel-inner .active, .carousel-inner .active + .carousel-item, .carousel-inner .active + .carousel-item + .carousel-item, .carousel-inner .active + .carousel-item + .carousel-item + .carousel-item { display: block; } .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left), .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item, .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item + .carousel-item, .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item + .carousel-item + .carousel-item { transition: none; } .carousel-inner .carousel-item-next, .carousel-inner .carousel-item-prev { position: relative; transform: translate3d(0, 0, 0); } .carousel-inner .active.carousel-item + .carousel-item + .carousel-item + .carousel-item + .carousel-item { position: absolute; top: 0; right: -25%; z-index: -1; display: block; visibility: visible; } /* left or forward direction */ .active.carousel-item-left + .carousel-item-next.carousel-item-left, .carousel-item-next.carousel-item-left + .carousel-item, .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item, .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item + .carousel-item, .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item + .carousel-item + .carousel-item { position: relative; transform: translate3d(-100%, 0, 0); visibility: visible; } /* farthest right hidden item must be abso position for animations */ .carousel-inner .carousel-item-prev.carousel-item-right { position: absolute; top: 0; left: 0; z-index: -1; display: block; visibility: visible; } /* right or prev direction */ .active.carousel-item-right + .carousel-item-prev.carousel-item-right, .carousel-item-prev.carousel-item-right + .carousel-item, .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item, .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item + .carousel-item, .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item + .carousel-item + .carousel-item { position: relative; transform: translate3d(100%, 0, 0); visibility: visible; display: block; visibility: visible; } } /* Bootstrap Lightbox using Modal */ #profile-grid { overflow: auto; white-space: normal; } #profile-grid .profile { padding-bottom: 40px; } #profile-grid .panel { padding: 0 } #profile-grid .panel-body { padding: 15px } #profile-grid .profile-name { font-weight: bold; } #profile-grid .thumbnail {margin-bottom:6px;} #profile-grid .panel-thumbnail { overflow: hidden; } #profile-grid .img-rounded { border-radius: 4px 4px 0 0;}
$('#carouselExample').on('slide.bs.carousel', function (e) { var $e = $(e.relatedTarget); var idx = $e.index(); var itemsPerSlide = 4; var totalItems = $('.carousel-item').length; if (idx >= totalItems-(itemsPerSlide-1)) { var it = itemsPerSlide - (totalItems - idx); for (var i=0; i<it; i++) { // append slides to end if (e.direction=="left") { $('.carousel-item').eq(i).appendTo('.carousel-inner'); } else { $('.carousel-item').eq(0).appendTo('.carousel-inner'); } } } }); $('#carouselExample').carousel({ interval: 2000 }); $(document).ready(function() { /* show lightbox when clicking a thumbnail */ $('a.thumb').click(function(event){ event.preventDefault(); var content = $('.modal-body'); content.empty(); var title = $(this).attr("title"); $('.modal-title').html(title); content.html($(this).html()); $(".modal-profile").modal({show:true}); }); });

Related: See More


Questions / Comments:

how to show two item in carousal

gmehtaice (0) - 1 year ago - Reply 0


not working bootstrap 4.1.1

santhosh1198 (-1) - 5 months ago - Reply -1


I add:

.carousel-item {margin-right: auto !important;}

and it works for me

prym7792 (1) - 4 months ago - Reply 1


This Carousel doesnt work with latest version of bootstrap 4 as per the example here anyone with an idea or who have a solution?

gathumartins (-2) - 8 months ago - Reply -2


issue On Prev arrow click How to fix It?

nikhilsan () - 3 months ago - Reply 0


Why if you change boot strap version to 4.3.1 it does'n work

eldonfsr () - 3 months ago - Reply 0


How to make infinite loop?

adrianahr () - 4 months ago - Reply 0


How to move the next and prev near to start and adge of photos... i can't down load all source i copy an paste but not works in same way...

eldonfsr () - 4 months ago - Reply 0


The first carousel-item doesn't close after the last one. Like in this example. Do you have a solution?

biancailona () - 1 year ago - Reply 0