Bootstrap 4 Multiple Image Carousel (5 изображений вместо 4) - PullRequest
Новая
       40

Bootstrap 4 Multiple Image Carousel (5 изображений вместо 4)

0 голосов
/ 08 мая 2019

Я реализовал карусель с этого сайта https://www.codeply.com/go/3EQkUOhhZz

Однако на этом сайте одновременно отображаются 4 изображения.Мне нужна помощь, чтобы отобразить 5 изображений за раз, а затем продвигать одно изображение за раз после этого.

Я попытался изменить javacript и могу отобразить 5 изображений.Тем не менее, когда он отображается, он глючит, как будто изображения перезагружаются (таким образом, похоже, что 2 набора появляются на долю секунды)

HTML 

 <div class="row mx-auto my-auto">
        <div id="recipeCarousel" class="carousel slide w-100" data-ride="carousel">
            <div class="carousel-inner w-100" role="listbox">
                <div class="carousel-item active">
                    <img class="d-block col-2 img-fluid" src="http://placehold.it/350x180?text=1">
                </div>
                <div class="carousel-item">
                    <img class="d-block col-2 img-fluid" src="http://placehold.it/350x180?text=2">
                </div>
                <div class="carousel-item">
                    <img class="d-block col-2 img-fluid" src="http://placehold.it/350x180?text=3">
                </div>
                <div class="carousel-item">
                    <img class="d-block col-2 img-fluid" src="http://placehold.it/350x180?text=4">
                </div>
                <div class="carousel-item">
                    <img class="d-block col-2 img-fluid" src="http://placehold.it/350x180?text=5">
                </div>
                <div class="carousel-item">
                    <img class="d-block col-2 img-fluid" src="http://placehold.it/350x180?text=6">
                </div>
            </div>
            <a class="carousel-control-prev" href="#recipeCarousel" role="button" data-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
            </a>
            <a class="carousel-control-next" href="#recipeCarousel" role="button" data-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>
        </div>
    </div>

Javascript 

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

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

    for (var i=0;i<3;i++) {
        next=next.next();
        if (!next.length) {
            next = $(this).siblings(':first');
        }

        next.children(':first-child').clone().appendTo($(this));
      }
});
...