12

Another question was asked on the same need (that question) for bootstrap 3 but the proposed solutions don't work with Bootstrap 4.

The image of this post explains very well what I want.

enter image description here

And even more this bootply.

How can I achieve this with Bootstrap 4 ?

2
  • I want multiple slide displayed at the same time (1, 2 and 3), and when I click next I want the slide 2 and 3 moved to the left a little and the 4 displayed (while the 1 disappear). Commented Feb 2, 2016 at 11:53
  • Note that the "bootstrap 3" question mentioned above also now has an amazing answer that covers Bootstrap 4. stackoverflow.com/a/20008623/413538 this really should be closed as a duplicate. Commented May 28, 2020 at 22:53

2 Answers 2

8

    $('#carousel-example-generic').on('slid.bs.carousel', function () {
        $(".carousel-item.active:nth-child(" + ($(".carousel-inner .carousel-item").length -1) + ") + .carousel-item").insertBefore($(".carousel-item:first-child"));
        $(".carousel-item.active:last-child").insertBefore($(".carousel-item:first-child"));
    });   
        .carousel-item.active,
        .carousel-item.active + .carousel-item,
        .carousel-item.active + .carousel-item  + .carousel-item {
           width: 33.3%;
           display: block;
           float:left;
        }  
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" rel="stylesheet"/>
    <h1>Hello, world!</h1>
<div class="container"> 
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner" role="listbox">
    <div class="carousel-item active">
      <img data-src="holder.js/300x200?text=1">
    </div>
    <div class="carousel-item">
      <img data-src="holder.js/300x200?text=2">
    </div>    
    <div class="carousel-item">
      <img data-src="holder.js/300x200?text=3">
    </div>    
    <div class="carousel-item">
      <img data-src="holder.js/300x200?text=4">
    </div>    
    <div class="carousel-item">
      <img data-src="holder.js/300x200?text=5">
    </div>    
    <div class="carousel-item">
      <img data-src="holder.js/300x200?text=6">
    </div>    
    <div class="carousel-item">
      <img data-src="holder.js/300x200?text=7">
    </div>
  </div>
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="icon-prev" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="icon-next" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>
   
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/holder/2.9.1/holder.min.js"></script>

2
  • 1
    This code works but it also "glitchy". Try pressing the button left side next button (a.k.a. "previous") and you will see how weird the loading is. Is there anyway this can be improved? Commented Jul 30, 2017 at 7:30
  • agreed it is slow and glitchy... new slides take a while to load... and faster clicking makes it worse... Commented Jan 6, 2019 at 23:28
5

Update 2018

Take a look at the Bootstrap 4 docs, and change the markup to Bootstrap 4:

http://bootply.com/SObwIezDyx

Bootstrap 4 Beta options: https://stackoverflow.com/a/20008623/171456

2
  • The result isn't what I want exactly. The transition isn't the same as the bootply I linked. I've already tried to change the markup. Commented Feb 2, 2016 at 13:48
  • Yeah, since the BS 4 transition animations are different, you may need to change the CSS... but it's still moving one at a time. Commented Feb 2, 2016 at 14:01

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.