I implement a Bootstrap carousel to view multiple image thumbnails (4 images) in each carousel element. When I click on the next or previous control, it should only shift 1 image out of 4. How can I achieve this.
I already tried this example offered by skelly , but when I implement it, only one image is displayed on the carousel, and when I click on the previous / next, then another image is displayed, except for the previous one. I need four images that need to be shown all the time. if 1 image on the left is turned off, then at the same time, another image should be inserted on the right. I added "jquery / 1.11.1 / jquery.min.js" and "bootstrap-3.2.0-dist / bootstrap.js" additionally, but this did not work.
my implemented code:
<html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="./bootstrap-3.2.0-dist/js/bootstrap.js"></script> <script type="text/javascript"> $('#myCarousel').carousel({ interval: 4000 }) $('.carousel .item').each(function(){ var next = $(this).next(); if (!next.length) { next = $(this).siblings(':first'); } next.children(':first-child').clone().appendTo($(this)); for (var i=0;i<2;i++) { next=next.next(); if (!next.length) { next = $(this).siblings(':first'); } next.children(':first-child').clone().appendTo($(this)); } }); </script> <style type="text/css"> .carousel-inner .active.left { left: -25%; } .carousel-inner .next { left: 25%; } .carousel-inner .prev { left: -25%; } .carousel-control { width: 4%; } .carousel-control.left,.carousel-control.right {margin-left:15px;background-image:none;} </style> </head> <body> <div class="col-md-12 text-center"><h3>Bootstrap 3 Multiple Slide Carousel</h3></div> <div class="col-md-6 col-md-offset-3"> <div class="carousel slide" id="myCarousel"> <div class="carousel-inner"> <div class="item active"> <div class="col-xs-3"><a href="#"><img src="http://placehold.it/500/e499e4/fff&text=1" class="img-responsive"></a></div> </div> <div class="item"> <div class="col-xs-3"><a href="#"><img src="http://placehold.it/500/e477e4/fff&text=2" class="img-responsive"></a></div> </div> <div class="item"> <div class="col-xs-3"><a href="#"><img src="http://placehold.it/500/eeeeee&text=3" class="img-responsive"></a></div> </div> <div class="item"> <div class="col-xs-3"><a href="#"><img src="http://placehold.it/500/f4f4f4&text=4" class="img-responsive"></a></div> </div> <div class="item"> <div class="col-xs-3"><a href="#"><img src="http://placehold.it/500/f566f5/333&text=5" class="img-responsive"></a></div> </div> <div class="item"> <div class="col-xs-3"><a href="#"><img src="http://placehold.it/500/f477f4/fff&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&text=7" class="img-responsive"></a></div> </div> <div class="item"> <div class="col-xs-3"><a href="#"><img src="http://placehold.it/500/fcfcfc/333&text=8" class="img-responsive"></a></div> </div> </div> <a class="left carousel-control" href="#myCarousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a> <a class="right carousel-control" href="#myCarousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a> </div> </div> </body> </html>
Any suggestion would be highly appreciated.
source share