Bootstrap轮播无法显示多个项目

Question

我正在尝试在 Bootstrap 4 中创建一个显示多个项目的轮播，并且一次只能滚动一个项目，但似乎无法显示多个项目，它始终是单个项目。我已经浏览了大约 6 个不同的教程和其他论坛帖子，但仍然无法弄清楚这一点。我用所有代码创建了一个小提琴；

https://jsfiddle.net/nickgirard21/a74co06d/6/

代码是通过循环动态创建的，但小提琴显示的是最终的 HTML 输出；这是代码本身；

<div id="ArticleCarousel" class="carousel slide" data-ride="carousel" data-interval="0">
    <div class="carousel-inner row grid-width-100 mx-auto" role="listbox">
        @{ var first = true;}
        @foreach (DataRow row in Model.Tables[0].Rows)
        {
            if (@row["Category"].ToString() == "BBSpecific")
            {
                <div class="carousel-item col-md-3 @(first?Html.Raw("active"):Html.Raw(""))">
                    <div class="col-md-3 col-sm-6 col-xs-12">
                        <img src='~/images/Articles/@row["ImageName"]'  class="img-responsive" />
                        <a class="carousel-caption d-none d-md-block" href="/Home/Article?id=@row["Id"]">@row["Title"]</a>
                    </div>
                </div>
            first = false;
            }
        }
        </div>
    <a class="carousel-control-prev" href="#ArticleCarousel" 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="#ArticleCarousel" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
</div>

    $('#ArticleCarousel').on('slide.bs.carousel', function (e) {


    var $e = $(e.relatedTarget);
    var idx = $e.index();
    var itemsPerSlide = 4;
    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');
            }
        }
    }
});
$('#ArticleCarousel').carousel({
    interval: 0
});

Answer 1

你的小提琴很好用。

但是，您的图片尺寸小于轮播，这会导致 carousel-control-next 在图片右侧不明显的位置关闭。

您应该申请使用 bootstrap 4 iirc 缩放图像的新类是 img-fluid。