<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 ----------> <!------ Carousel ----------> <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> <!------ CSS CODE ----------> <style> @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(50%, 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;} </style> <div class="container" > <div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="4000"> <div class="carousel-inner row w-100 mx-auto" role="listbox"> <div class="carousel-item col-md-3 "> <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/200x200?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/200x200?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/200x200?text=3" alt="slide 3"> </a> </div> </div> </div> <div class="carousel-item col-md-3 active"> <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/200x200?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/200x200?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/200x200?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/200x200?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/200x200?text=8" alt="slide 8"> </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/200x200?text=8" alt="slide 9"> </a> </div> </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 text-faded" 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> <!------ JS CODE ----------> <script language="javascript"> $('#myCarousel').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'); } } } }); $('#myCarousel').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}); }); }); </script> <!--- End of carousel---->