Question

我找到了以下代码，以便同时在转盘中显示多个项目https://www.codeply.com/go/YbRfxfTDN1。

但是，我需要一次显示6项而不是4.我因此修改了Bootsrstrap网格以显示6列并修改了CSS transform：translateX（25％）; 为 transform：translateX（16.67％）; 但它仍然无效。

我和Jquery一起玩过，因为我觉得我需要克隆更多项目但是很难开始工作。

有人可以帮忙吗？

注意：项目数量会有所不同，因为这个轮播将动态填充。

＆＃13;

   $('#recipeCarousel').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<2;i++) {
            next=next.next();
            if (!next.length) {
            	next = $(this).siblings(':first');
          	}
            
            next.children(':first-child').clone().appendTo($(this));
            //some code to display 6 items
          }
    });

＆＃13;

   .carousel-inner .carousel-item.active,
    .carousel-inner .carousel-item-next,
    .carousel-inner .carousel-item-prev {
      display: flex;
    }
    
    .carousel-inner .carousel-item-right.active,
    .carousel-inner .carousel-item-next {
      transform: translateX(16.67%);
    }
    
    .carousel-inner .carousel-item-left.active, 
    .carousel-inner .carousel-item-prev {
      transform: translateX(-16.67%)
    }
      
    .carousel-inner .carousel-item-right,
    .carousel-inner .carousel-item-left{ 
      transform: translateX(0);
    }

＆＃13;

    
    <div class="container text-center my-3">
        <h2>Bootstrap 4 Multiple Item Carousel</h2>
        <div class="row mx-auto my-auto">
            <div id="recipeCarousel" class="carousel slide w-100" data-ride="carousel">
                <div class="carousel-inner" 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 class="carousel-item">
                        <img class="d-block col-2 img-fluid" src="http://placehold.it/350x180?text=7">
                    </div>
                    <div class="carousel-item">
                        <img class="d-block col-2 img-fluid" src="http://placehold.it/350x180?text=8">
                    </div>
                    <div class="carousel-item">
                        <img class="d-block col-2 img-fluid" src="http://placehold.it/350x180?text=9">
                    </div>
                    <div class="carousel-item">
                        <img class="d-block col-2 img-fluid" src="http://placehold.it/350x180?text=10">
                    </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>
        <h4>Advances one slide at a time</h4>
    </div>
    
    
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" ></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

＆＃13;

Answer 1

正如你所说，这是克隆更多项目的问题。请注意i<5：

https://www.codeply.com/go/kQ4S23ctUn

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

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

JQuery - 使用Bootstrap 4＆＃39; s Carousel

1 个答案: