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

Question

我已经实现了一个引导轮播，加载时看起来像这样：

代码如下：

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

所以我设法找到在幻灯片完成后触发的事件，这就是我需要处理更改的地方。此外，利用自动分配给当前 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。

这似乎工作得更好，并且无论您点击多少按钮都会表现良好。