"Carousel responsive "
Bootstrap 4.1.1 Snippet by Tris92

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container" id="carousel"> <div id="carouselExample" class="carousel slide" data-ride="carousel" data-interval="3000"> <div class="carousel-inner row w-100 mx-auto" role="listbox" id="img-saveurs"> <div class="carousel-item col-md-3 active"> <div class="panel panel-default"> <div class="panel-thumbnail"> <a href="#modal-saveurs" class="thumb"> <img class="img-fluid mx-auto d-block" src="http://via.placeholder.com/350x150"> </a> </div> </div> </div> <div class="carousel-item col-md-3 "> <div class="panel panel-default"> <div class="panel-thumbnail"> <a href="#modal-saveurs" class="thumb"> <img class="img-fluid mx-auto d-block" src="http://via.placeholder.com/350x150" > </a> </div> </div> </div> <div class="carousel-item col-md-3 "> <div class="panel panel-default"> <div class="panel-thumbnail"> <a href="#modal-saveurs" class="thumb"> <img class="img-fluid mx-auto d-block" src="http://via.placeholder.com/350x150" > </a> </div> </div> </div> <div class="carousel-item col-md-3 "> <div class="panel panel-default"> <div class="panel-thumbnail"> <a href="#modal-saveurs" title="image 5" class="thumb"> <img class="img-fluid mx-auto d-block" src="http://via.placeholder.com/350x150" > </a> </div> </div> </div> <div class="carousel-item col-md-3 "> <div class="panel panel-default"> <div class="panel-thumbnail"> <a href="#modal-saveurs" class="thumb"> <img class="img-fluid mx-auto d-block" src="http://via.placeholder.com/350x150" > </a> </div> </div> </div> <div class="carousel-item col-md-3 "> <div class="panel panel-default"> <div class="panel-thumbnail"> <a href="#modal-saveurs" class="thumb"> <img class="img-fluid mx-auto d-block" src="http://via.placeholder.com/350x150" > </a> </div> </div> </div> </div> </div> </div>
#carousel { margin: auto; } @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; } }
$('#carousel').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'); } } } });

Related: See More


Questions / Comments:

Doesn't work with bootstrap 4.3.1.

Need to add :

.carousel-item {

margin-right: 0px !important;

}

minusmaster () - 4 years ago - Reply 0