Multi-item dynamic carousel using bootstrap

Question

Multi-item dynamic carousel using bootstrap

Navigation

#1 by (1 votes)

0

I'm having trouble making a dynamic multi-item merry-go-round with just two bootstrap columns, when I report how many columns in the col-md-6 case the items break and are displayed in a further row below, could anyone help me?

How to stay:

Hereisanexamplewith3columns: link

php html5 bootstrap-3 carousel

asked by anonymous 29.06.2017 / 17:58

1 answer

Facebook Messenger API does not respond to new users [closed] Back button in webview

score 1 · Accepted Answer

Good afternoon!

I think it could be done that way. The changes were simple.

$('#myCarousel').carousel({
  interval: 10000
})

$('.carousel .item').each(function(){
  var next = $(this).next();
  if (!next.length) {
    next = $(this).siblings(':first');
  }
  
  next.children(':first-child').clone().appendTo($(this));
});

/* override position and transform in 3.3.x */
.carousel-inner .item.left.active {
  transform: translateX(-50%);
}
.carousel-inner .item.right.active {
  transform: translateX(50%);
}

.carousel-inner .item.next {
  transform: translateX(50%)
}
.carousel-inner .item.prev {
  transform: translateX(-50%)
}

.carousel-inner .item.right,
.carousel-inner .item.left { 
  transform: translateX(0);
}


.carousel-control.left,.carousel-control.right {background-image:none;}

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  
<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-6"><a href="#"><img src="http://placehold.it/500/bbbbbb/fff&amp;text=1"class="img-responsive"></a></div>
    </div>
    <div class="item">
      <div class="col-xs-6"><a href="#"><img src="http://placehold.it/500/CCCCCC/fff&amp;text=2"class="img-responsive"></a></div>
    </div>
    <div class="item">
      <div class="col-xs-6"><a href="#"><img src="http://placehold.it/500/eeeeee/fff&amp;text=3"class="img-responsive"></a></div>
    </div>
    <div class="item">
      <div class="col-xs-6"><a href="#"><img src="http://placehold.it/500/f4f4f4/fff&amp;text=4"class="img-responsive"></a></div>
    </div>
    <div class="item">
      <div class="col-xs-6"><a href="#"><img src="http://placehold.it/500/fcfcfc/333&amp;text=5"class="img-responsive"></a></div>
    </div>
    <div class="item">
      <div class="col-xs-6"><a href="#"><img src="http://placehold.it/500/f477f4/fff&amp;text=6"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>