同一页面上的默认轮播和多项目轮播

Question

我发现了同样的问题，但我没能成功。 (Bootstrap carousel with multiple items and default carousel on the same page)

我想结合默认轮播（每张幻灯片一张图片），例如 这个：https://www.codeply.com/go/s3I9ivCBYH

这是我的代码：https://www.codeply.com/go/6AXxUSWcmV

我尝试更改css，也尝试更改类的名称，与引导类的名称不同，放置一些ID，但没有成功......

我正在使用 bootstrap4

Answer 1

为了让两种类型的轮播在同一页面上运行，您只需为修改后的轮播附带的所有附加样式添加前缀，以防止样式冲突。在下面的示例中，我只是在样式前面加上“小”轮播的 id。

$('#small-carousel').on('slide.bs.carousel', function (e) {
    var $e = $(e.relatedTarget);
    var idx = $e.index();
    var itemsPerSlide = 3;
    var totalItems = $('.carousel-item').length;
    
    if (idx >= totalItems-(itemsPerSlide-1)) {
        var it = itemsPerSlide - (totalItems - idx);
        for (var i=0; i<it; i++) {
            // append slides to end
            if (e.direction=="left") {
                $('.carousel-item').eq(i).appendTo('.carousel-inner');
            }
            else {
                $('.carousel-item').eq(0).appendTo('.carousel-inner');
            }
        }
    }
});

/* Note the `#small-carousel` prefixes */
/*@media (min-width: 768px) {*/
    /* show 3 items */
    #small-carousel .carousel-inner .active,
    #small-carousel .carousel-inner .active + .carousel-item,
    #small-carousel .carousel-inner .active + .carousel-item + .carousel-item {
        display: block;
    }
    
    #small-carousel .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left),
    #small-carousel .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item,
    #small-carousel .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item + .carousel-item {
        transition: none;
    }
    
    #small-carousel .carousel-inner .carousel-item-next,
    #small-carousel .carousel-inner .carousel-item-prev {
      position: relative;
      transform: translate3d(0, 0, 0);
    }
    
    #small-carousel .carousel-inner .active.carousel-item + .carousel-item + .carousel-item + .carousel-item {
        position: absolute;
        top: 0;
        right: -33.3333%;
        z-index: -1;
        display: block;
        visibility: visible;
    }
    
    /* left or forward direction */
    #small-carousel .active.carousel-item-left + .carousel-item-next.carousel-item-left,
    #small-carousel .carousel-item-next.carousel-item-left + .carousel-item,
    #small-carousel .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item,
    #small-carousel .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item + .carousel-item {
        position: relative;
        transform: translate3d(-100%, 0, 0);
        visibility: visible;
    }
    
    /* farthest right hidden item must be abso position for animations */
    #small-carousel .carousel-inner .carousel-item-prev.carousel-item-right {
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
        display: block;
        visibility: visible;
    }
    
    /* right or prev direction */
    #small-carousel .active.carousel-item-right + .carousel-item-prev.carousel-item-right,
    #small-carousel .carousel-item-prev.carousel-item-right + .carousel-item,
    #small-carousel .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item,
    #small-carousel .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item + .carousel-item {
        position: relative;
        transform: translate3d(100%, 0, 0);
        visibility: visible;
        display: block;
        visibility: visible;
    }
/*}*/

<!-- “Big” carousel -->
<div id="big-carousel" class="carousel slide mb-3" data-ride="carousel">
    <div class="carousel-inner">
        <div class="carousel-item active">
            <img class="d-block w-100" src="http://placehold.it/800x150/f5d0c5/fff&text=Big+1" alt="Big 1">
        </div>
        <div class="carousel-item">
            <img class="d-block w-100" src="http://placehold.it/800x150/d69f7e/fff&text=Big+2" alt="Big 2">
        </div>
        <div class="carousel-item">
            <img class="d-block w-100" src="http://placehold.it/800x150/774936/fff&text=Big+3" alt="Big 3">
        </div>
    </div>
    
    <a class="carousel-control-prev" href="#big-carousel" 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="#big-carousel" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
</div>

<!-- “Small” carousel with id="small-carousel" -->
<div class="container-fluid">
    <div id="small-carousel" class="carousel slide" data-ride="carousel" data-interval="2000">
        <div class="carousel-inner row w-100 mx-auto" role="listbox">
            <div class="carousel-item col-4 active">
                <img class="img-fluid mx-auto d-block" src="http://placehold.it/400x200/729ea1/fff&text=Small+1" alt="Slide 1">
            </div>
            <div class="carousel-item col-4">
                <img class="img-fluid mx-auto d-block" src="http://placehold.it/400x200/b5bd89/fff&text=Small+2" alt="Slide 2">
            </div>
            <div class="carousel-item col-4">
                <img class="img-fluid mx-auto d-block" src="http://placehold.it/400x200/dfbe99/fff&text=Small+3" alt="Slide 3">
            </div>
            <div class="carousel-item col-4">
                <img class="img-fluid mx-auto d-block" src="http://placehold.it/400x200/ec9192/fff&text=Small+4" alt="Slide 4">
            </div>
            <div class="carousel-item col-4">
                <img class="img-fluid mx-auto d-block" src="http://placehold.it/400x200/db5375/fff&text=Small+5" alt="Slide 5">
            </div>
            <div class="carousel-item col-4">
                <img class="img-fluid mx-auto d-block" src="http://placehold.it/400x200/596f62/fff&text=Small+6" alt="Slide 6">
            </div>
            <div class="carousel-item col-4">
                <img class="img-fluid mx-auto d-block" src="http://placehold.it/400x200/c3d898/fff&text=Small+7" alt="Slide 7">
            </div>
        </div>
        <a class="carousel-control-prev" href="#small-carousel" role="button" data-slide="prev">
            <i class="fa fa-chevron-left fa-lg text-muted"></i>
            <span class="sr-only">Previous</span>
        </a>
        <a class="carousel-control-next text-faded" href="#small-carousel" role="button" data-slide="next">
            <i class="fa fa-chevron-right fa-lg text-muted"></i>
            <span class="sr-only">Next</span>
        </a>
    </div>
</div>


<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js"></script>