自定义 Bootstrap 轮播 - 仅显示设置数量的 DIV

Question

我实现了一个 bootstrap 轮播，在加载时看起来像这样：

代码如下：

html:

    <div class="container text-center my-3">
        <div class="row mx-auto my-auto">
            <div id="recipeCarousel" class="carousel slide w-100" data-wrap="false">
                <div class="carousel-inner w-100" role="listbox">

                    <div class="carousel-item active">
                        <div class="col-md-1">
                            <div class="card card-body">
                                1
                            </div>
                        </div>
                    </div>
                    <div class="carousel-item">
                        <div class="col-md-1">
                            <div class="card card-body">
                                2
                            </div>
                        </div>
                    </div>
... carousel-item divs repeat to 18 ...
                    <div class="carousel-item">
                        <div class="col-md-1">
                            <div class="card card-body">
                                18
                            </div>
                        </div>
                    </div>

                </div>
                <a class="carousel-control-prev w-auto" href="#recipeCarousel" role="button" data-slide="prev">
                    <span class="carousel-control-prev-icon bg-dark border border-dark rounded-circle" aria-hidden="true"></span>
                    <span class="sr-only">Previous</span>
                </a>
                <a class="carousel-control-next w-auto" href="#recipeCarousel" role="button" data-slide="next">
                    <span class="carousel-control-next-icon bg-dark border border-dark rounded-circle" aria-hidden="true"></span>
                    <span class="sr-only">Next</span>
                </a>
            </div>
        </div>
    </div>

Javascript:

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

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

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

CSS:

@media (max-width: 768px) {
    .carousel-inner .carousel-item > div {
        display: block;
    }

        .carousel-inner .carousel-item > div:first-child {
            display: block;
        }
}

.carousel-inner .carousel-item.active,
.carousel-inner .carousel-item-next,
.carousel-inner .carousel-item-prev {
    display: flex;
}

/* display 12 */
@media (min-width: 768px) {

    .carousel-inner .carousel-item-right.active,
    .carousel-inner .carousel-item-next {
        transform: translateX(8.333%);
    }

    .carousel-inner .carousel-item-left.active,
    .carousel-inner .carousel-item-prev {
        transform: translateX(-8.333%);
    }
}

.carousel-inner .carousel-item-right,
.carousel-inner .carousel-item-left {
    transform: translateX(0);
}

我不想轮播在我走到尽头时重复（点击向右箭头 6 次）：

不过，我似乎可以继续单击向右箭头，直到 18 成为该行中的第一个 div：

当最后一个 (18) div 首次出现在屏幕上时（即上面的第二个屏幕截图），我不知道如何阻止右键执行移动。

非常感谢任何帮助，或者如果有任何不清楚的地方请告诉我。

Answer 1

所以我设法找到触发 'after' 幻灯片完成的事件，这是我需要处理更改的地方。此外，利用自动分配给当前 WeatherElement 的当前 Active 属性。现在工作的代码如下所示：

html:

<div class="container text-center my-3">
    <div class="row mx-auto my-auto">
        <div id="recipeCarousel" class="carousel slide w-100" data-wrap="false">
            <div class="carousel-inner carousel-weather w-100" role="listbox">

                <div id="weatherCard_0" class="carousel-item active">
                    <div class="col-md-1">
                        <div class="card card-body">
                            1
                        </div>
                    </div>
                </div>
                ... repeat till 18

                <div id="weatherCard_18" class="carousel-item">
                    <div class="col-md-1">
                        <div class="card card-body">
                            18
                        </div>
                    </div>
                </div>

            </div>
            <a id="leftWeatherButton" class="carousel-control carousel-control-prev w-auto" href="#recipeCarousel" role="button" data-slide="prev">
                <span class="carousel-control-prev-icon bg-dark border border-dark rounded-circle" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
            </a>
            <a id="rightWeatherButton" class="carousel-control carousel-control-next w-auto" href="#recipeCarousel" role="button" data-slide="next">
                <span class="carousel-control-next-icon bg-dark border border-dark rounded-circle" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>
        </div>
    </div>
</div>

我从按钮中删除了 onClick() 事件。

Jaascript:

$('#recipeCarousel').bind('slid.bs.carousel', function (e) {

    var $this = $(this);

   $this.children('.carousel-control').show();

    var weatherElements = $('.carousel-weather')[0].children;
    var elementsLength = weatherElements.length - 1;
    var first = weatherElements[0];
    var lastCount;

    if (elementsLength <= 11) {
        lastCount = 0
    }
    else {
        lastCount = elementsLength - 11;
    }

    var last = weatherElements[lastCount];

    if ($(last).hasClass('active')) {
        $this.children('.carousel-control-next').hide();
    } else if ($(first).hasClass('active')) {
        $this.children('.carousel-control-prev').hide();
    }

});

function ManageWeatherButtons() {

    $("#leftWeatherButton").hide();
    $("#rightWeatherButton").hide();

    debugger;
    if (weatherCards.length > 12) {
        $("#rightWeatherButton").show();
    }
}

它替换了初始代码示例中的所有 javascript。

这似乎工作得更好，并且无论您单击多少按钮都会正常运行。

自定义 Bootstrap 轮播 - 仅显示设置数量的 DIV

Customized Bootstrap Carousel - only show set number of DIVs

javascript

css

carousel

twitter-bootstrap