时间戳

首页 > 解决方案 > 如何在引导程序中添加幻灯片

javascript - 如何在引导程序中添加幻灯片

问题描述

我试图为每个显示器添加幻灯片数量。它显示 4 个幻灯片数量。我尝试将 .carousel-item 类添加到 css，但它似乎不起作用。它所做的只是在第四张幻灯片之后显示最后一张幻灯片。尝试将 lg-3 更改为 lg-2 它缩小了幻灯片，但添加了任何内容。

$('#multi-carousel').on('slide.bs.carousel', function (e) {
    var $e = $(e.relatedTarget);
    var idx = $e.index();
    var itemsPerSlide = 5;
    var totalItems = $('#multi-carousel .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") {
                $('#multi-carousel .carousel-item').eq(i).appendTo('#multi-carousel .carousel-inner');
            }
            else {
                $('#multi-carousel .carousel-item').eq(0).appendTo('#multi-carousel .carousel-inner');
            }
        }
    }
});
@media (min-width: 768px) and (max-width: 991px) {
    /* Show 4th slide on md if col-md-4*/
    #multi-carousel .carousel-inner .active.col-md-4.carousel-item + .carousel-item + .carousel-item + .carousel-item {
        position: absolute;
        top: 0;
        right: -33.3333%; /*change this with javascript in the future*/
        z-index: -1;
        display: block;
        visibility: visible;
    }
}

@media (min-width: 576px) and (max-width: 768px) {
    /* Show 3rd slide on sm if col-sm-6*/
    #multi-carousel .carousel-inner .active.col-sm-6.carousel-item + .carousel-item + .carousel-item {
        position: absolute;
        top: 0;
        right: -50%; /*change this with javascript in the future*/
        z-index: -1;
        display: block;
        visibility: visible;
    }
}

@media (min-width: 576px) {
    #multi-carousel .carousel-item {
        margin-right: 0;
    }
    /* show 2 items */
    #multi-carousel .carousel-inner .active + .carousel-item {
        display: block;
    }

    #multi-carousel .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left),
    #multi-carousel .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item {
        transition: none;
    }

    #multi-carousel .carousel-inner .carousel-item-next {
        position: relative;
        transform: translate3d(0, 0, 0);
    }
    /* left or forward direction */
    #multi-carousel .active.carousel-item-left + .carousel-item-next.carousel-item-left,
    #multi-carousel .carousel-item-next.carousel-item-left + .carousel-item,
    #multi-carousel .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item {
        position: relative;
        transform: translate3d(-100%, 0, 0);
        visibility: visible;
    }
    /* farthest right hidden item must be also positioned for animations */
    #multi-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 */
    #multi-carousel .active.carousel-item-right + .carousel-item-prev.carousel-item-right,
    #multi-carousel .carousel-item-prev.carousel-item-right + .carousel-item,
    #multi-carousel .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item {
        position: relative;
        transform: translate3d(100%, 0, 0);
        visibility: visible;
        display: block;
        visibility: visible;
    }
}
/* MD */
@media (min-width: 768px) {
    /* show 3rd of 3 item slide */
    #multi-carousel .carousel-inner .active + .carousel-item + .carousel-item {
        display: block;
    }

    #multi-carousel .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item + .carousel-item {
        transition: none;
    }

    #multi-carousel .carousel-inner .carousel-item-next {
        position: relative;
        transform: translate3d(0, 0, 0);
    }
    /* left or forward direction */
    #multi-carousel .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item + .carousel-item {
        position: relative;
        transform: translate3d(-100%, 0, 0);
        visibility: visible;
    }
    /* right or prev direction */
    #multi-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;
    }
}
/* LG */
@media (min-width: 991px) {
    /* show 4th item */
    #multi-carousel .carousel-inner .active + .carousel-item + .carousel-item + .carousel-item {
        display: block;
    }

    #multi-carousel .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item + .carousel-item + .carousel-item {
        transition: none;
    }
    /* Show 5th slide on lg if col-lg-3 */
    #multi-carousel .carousel-inner .active.col-lg-3.carousel-item + .carousel-item + .carousel-item + .carousel-item + .carousel-item {
        position: absolute;
        top: 0;
        right: -25%; /*change this with javascript in the future*/
        z-index: -1;
        display: block;
        visibility: visible;
    }
    /* left or forward direction */
    #multi-carousel .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item + .carousel-item + .carousel-item {
        position: relative;
        transform: translate3d(-100%, 0, 0);
        visibility: visible;
    }
    /* right or prev direction //t - previous slide direction last item animation fix */
    #multi-carousel .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item + .carousel-item + .carousel-item {
        position: relative;
        transform: translate3d(100%, 0, 0);
        visibility: visible;
        display: block;
        visibility: visible;
    }
    }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="multi-carousel" class="carousel slide" data-ride="carousel">
            <div class="carousel-inner row w-100 mx-auto" role="listbox">
                <div class="carousel-item col-12 col-sm-6 col-md-4 col-lg-2 active">
                    <img src="assets/img/backgrounds/1.jpg" class="img-fluid mx-auto d-block" alt="img1">
                </div>
                <div class="carousel-item col-12 col-sm-6 col-md-4 col-lg-2">
                    <img src="assets/img/backgrounds/2.jpg" class="img-fluid mx-auto d-block" alt="img2">
                </div>
                <div class="carousel-item col-12 col-sm-6 col-md-4 col-lg-2">
                    <img src="assets/img/backgrounds/3.jpg" class="img-fluid mx-auto d-block" alt="img3">
                </div>
                <div class="carousel-item col-12 col-sm-6 col-md-4 col-lg-2">
                    <img src="assets/img/backgrounds/4.jpg" class="img-fluid mx-auto d-block" alt="img4">
                </div>
                <div class="carousel-item col-12 col-sm-6 col-md-4 col-lg-2">
                    <img src="assets/img/backgrounds/5.jpg" class="img-fluid mx-auto d-block" alt="img5">
                </div>
                <div class="carousel-item col-12 col-sm-6 col-md-4 col-lg-2">
                    <img src="assets/img/backgrounds/6.jpg" class="img-fluid mx-auto d-block" alt="img6">
                </div>
                <div class="carousel-item col-12 col-sm-6 col-md-4 col-lg-2">
                    <img src="assets/img/backgrounds/7.jpg" class="img-fluid mx-auto d-block" alt="img7">
                </div>
                <div class="carousel-item col-12 col-sm-6 col-md-4 col-lg-2">
                    <img src="assets/img/backgrounds/8.jpg" class="img-fluid mx-auto d-block" alt="img8">
                </div>
            </div>
            <a class="carousel-control-prev w-10" href="#multi-carousel" role="button" data-slide="prev">
                <span aria-hidden="true"><i class="fas fa-arrow-alt-circle-left fa-2x"></i></span>
                <span class="sr-only">Previous</span>
            </a>
            <a class="carousel-control-next w-10" href="#multi-carousel" role="button" data-slide="next">
                <span aria-hidden="true"><i class="fas fa-arrow-alt-circle-right fa-2x"></i></span>
                <span class="sr-only">Next</span>
            </a>
        </div>

这是添加 .carousel-item 后的结果

标签： javascripthtmlcsstwitter-bootstrapbootstrap-4

解决方案

您是否尝试过将itemsPerSlide的变量值从“5”更改为“9”？希望对你有效。

推荐阅读