Я пытаюсь создать карусель в Bootstrap 4 с несколькими отображаемыми элементами и возможностью прокручивать только 1 элемент за один раз, но не могу отобразить несколько элементов, это всегда один элемент.Я прошел около 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
});