6

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&amp;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&amp;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&amp;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&amp;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&amp;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&amp;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&amp;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&amp;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.

legoscia
  • 39,593
  • 22
  • 116
  • 167
NawazSE
  • 593
  • 4
  • 9
  • 21
  • 1
    See this example: http://bootply.com/94452 – Carol Skelly Jul 24 '14 at 07:34
  • Thanks to @skelly for the base work here. For future Googlers I modified this so that it collapses to does show 2, move 1 on tablet and show 1, move 1 on phone: http://www.bootply.com/PMDIAzc1Qo – rtpHarry Feb 12 '15 at 16:17
  • 1
    I was trying to adapt this example for a **jekyll** site and it was not working properly, after hours of struggle I finally got it working by enclosing the **javascript** code inside `$(document).ready(function() {` **javascript** `}` – Imran Ali Feb 02 '16 at 09:30

2 Answers2

6

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.

Alex
  • 196
  • 1
  • 6
  • 3
    Thanks to @skelly and Alex for the base work here. For future Googlers I modified this so that it collapses to show 2, move 1 on tablet and show 1, move 1 on phone: http://www.bootply.com/PMDIAzc1Qo – rtpHarry Feb 12 '15 at 16:16
0

I've found that Skelly's suggestion works: one image is removed as another is added, such that there are four images displayed at any one time.

mongol
  • 52
  • 1
  • 9