Bootstrap 4 Carousel一次多帧并滑动一帧 [英] Bootstrap 4 Carousel Multiple frames at once and slide by one

问题描述

有人问了同样的问题(

甚至更多的此bootply .

如何通过Bootstrap 4实现这一目标?

解决方案

  $('#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 {宽度:33.3％;显示:块；向左飘浮;}  

 < link href ="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css"rel =" stylesheet"/>< h1>你好，世界！</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">上一个</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">下一步</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>  

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.

And even more this bootply.

How can I achieve this with Bootstrap 4 ?

解决方案

    $('#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>

这篇关于Bootstrap 4 Carousel一次多帧并滑动一帧的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！