Menu
I am implementing the Bootstrap Carousel for making view multiple image thumbnail (4 images) in each carousel item. When I click on the next or prev control then it should slide only 1 image out of 4. How can I achieve this.
I already tried this example suggested by skelly but when I implement it shows only a single image on the carousel and when I click on the prev/next control then only one more image is showing besides the earlier one. I need Four images to be shown all the times. if 1 image from left is goes out then at the same time 1 more image should be inserted from the right. I added the "jquery/1.11.1/jquery.min.js" and "bootstrap-3.2.0-dist/bootstrap.js" additionally but it didn't work.
my implemented code is as:
<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.
516
They both have the same function: to display photos or other media files in the form of a slideshow. This is either automatic or manually controlled. However, sliders only display one slide at a time. Whereas carousels allow users to see multiple slides at once.
Following are the steps to create a Bootstrap carousel:Apply CSS to resize the . carousel Bootstrap card body by using the code segment below. In this step, the sliding images are defined in the division tag as under. Last step is to add controls to slide images using the carousel-control class as below.
I implemented the slider from bootply but the previous button doesn't work as expected. I fixed it by adding .carousel-inner .active.right { left: 25%; } in the CSS file.
171
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
