Javascript 自举旋转木马can'；不能显示多个项目

我试图在Bootstrap 4中创建一个旋转木马，其中显示多个项目，并且一次只能滚动一个项目，但似乎无法显示多个项目，它始终是单个项目。我已经阅读了大约6篇不同的教程和其他论坛帖子，但仍然无法理解这一点。我对所有的代码都做了修改

代码是通过循环动态创建的，但fiddle显示最终的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
});

@{var first=true；}
@foreach（Model.Tables[0].行中的DataRow行）
{
if（@row[“Category”].ToString（）=“BBSpecific”）
{
第一个=假；
}
}
$（'ArticleCarousel'）。on（'slide.bs.carousel'，函数（e）{
var$e=$（e.relatedTarget）；
var idx=$e.index（）；
var itemsPerSlide=4；
var totalItems=$（'.carousel item'）。长度；
如果（idx>=totalItems-（itemsPerSlide-1））{
var it=itemsPerSlide-（totalItems-idx）；
for（var i=0；i

你的小提琴很好用

但是，您的图像在大小上小于旋转木马，这会导致在图像右侧的模糊位置关闭旁边的旋转木马控件

---

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

我的问题是如何让它一次显示多个项目，然后一次勾选一个项目，但它没有这样做。它显示1个项目，一次勾选一个项目，我不担心箭头的位置