Bootstrap 4 Carousel несколько кадров одновременно и слайд один

Другой вопрос был задан вопрос о том же потребности (that question) для начальной загрузки 3, но предлагаемые решения не работают с Bootstrap 4.Bootstrap 4 Carousel несколько кадров одновременно и слайд один

Изображение этого поста объясняет очень хорошо, что я хочу.

И еще this bootply.

Как я могу достичь этого с помощью Bootstrap 4?

источник

2016-02-02 Elie Teyssedou

Я хочу, чтобы одновременно отображалось несколько слайдов (1, 2 и 3), и когда я нажимаю дальше, я хочу, чтобы слайд 2 и 3 немного перемещались влево, а 4 отображались (в то время как 1 исчезают) , –

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

источник

2016-02-06 14:40:30

Этот код работает, но он также «глючит». Попробуйте нажать кнопку слева на следующей кнопке (a.k.a. «предыдущая»), и вы увидите, насколько странная загрузка. В любом случае это можно улучшить? – jaysoifer

Update 2017

Посмотрите на Bootstrap 4 docs, и изменить разметку Bootstrap 4:

http://bootply.com/SObwIezDyx

Bootstrap 4 Beta варианты: https://stackoverflow.com/a/20008623/171456

источник

2016-02-02 13:06:15 ZimSystem

Результат - это не то, что я хочу. Переход - это не то же самое, что я связал bootply. Я уже пытался изменить разметку. –

Да, поскольку анимация перехода BS 4 отличается, вам может потребоваться изменить CSS ... но она по-прежнему перемещается по одному. – ZimSystem

Bootstrap 4 Carousel несколько кадров одновременно и слайд один

ответ

Смежные вопросы