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

您的小提琴效果很好。

但是，您的图像的尺寸小于旋转木马，导致旋转木马控件旁边在图像右侧的隐蔽位置关闭。

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

引导轮播无法显示多个项目

1 个答案: