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 ?

Community
  • 1
  • 1
Elie Teyssedou
  • 749
  • 1
  • 7
  • 19
  • 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). – Elie Teyssedou Feb 02 '16 at 11:53
  • Note that the "bootstrap 3" question mentioned above also now has an amazing answer that covers Bootstrap 4. https://stackoverflow.com/a/20008623/413538 this really should be closed as a duplicate. – JamesWilson May 28 '20 at 22:53

2 Answers2

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>
Bass Jobsen
  • 48,736
  • 16
  • 143
  • 224
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

Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
  • 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. – Elie Teyssedou Feb 02 '16 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. – Carol Skelly Feb 02 '16 at 14:01