"Bootstrap轮播无法显示多个项目"

Question

I'm trying to create a carousel in Bootstrap 4 with multiple items displayed and being able to scroll just 1 item at a time but can't seem to get multiple items displayed, it's always the single item. I have gone through about 6 different tutorials and other forum posts but am still unable to figure this out. I've created a fiddle with all of the code;

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

the code is created dynamically through a loop, but the fiddle shows the final HTML output; Here is the code itself;

<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

Your fiddle works fine.

Your images however, are smaller than the carousel in size, which causes the carousel-control-next to be off in an obscure location to the right hand side of the image.

The new class which you should be applying for scaling images with bootstrap 4 iirc, is img-fluid.

Answer 2

Using Responsive bootstrap 5 carousel with multiple items<\/a> :