Question

我想在我的图书馆项目中使用引导程序的轮播。我想每次连续显示三本书。目前，我有效的代码仅涉及一本书：

<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
    <div class="carousel-inner">
        @{
            var first = true;
        }
        @foreach (var item in Model)
        {
            <div class="carousel-item @(first ? Html.Raw("active") : Html.Raw(""))">
                <div class="row">
                    <div class="col-sm"><img class="d-block w-100" src="~/Content/BookImages/@item.Image" alt="@item.Title"></div>
                </div>
            </div>
            first = false;
        }
    </div>
    <a class="carousel-control-prev" href="#carouselExampleControls" 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="#carouselExampleControls" role="button"
       data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
</div>

有人可以帮我吗，所以我可以每行显示三本书？还有没有一种方法可以实现for循环而不是每个循环？我之所以问是因为我想为图书馆的新书做一个轮播，我希望它显示添加到图书馆的最后6本书（连续3本书）。

感谢您的帮助

Answer 1

对此的最佳解决方案是将滑块更改为以下形式： Slick Slider

如果您仍要使用引导轮播，则必须克隆项目列表中的项目，然后通过javascript将活动类添加到3个项目中，并在每次转换时通过JS将活动类移动到3个项目中进行显示。 / p>

使用光滑的滑块，您只需添加类似的内容，即可完成操作：

$table->dateTime('ends_at');

MVC引导轮播

1 个答案: