javascript - 如何将 div 元素放入 jQuery Slider 中，显示至少 5 个元素，并使用左右 slider 查看更多元素？

Question

我在带有 col-sm-3 类的页面上有 div 元素。到目前为止，我有 6 个这样的元素，因此，4 个元素在 1 行上，2 个在下一行，占该行的一半。我正在使用 Bootstrap 。

我想使用 JQuery 将所有这些元素包含在 slider 的 1 行中，至少显示 5 个元素，并且能够单击左右箭头按钮查看所有元素。

我发现这个名为 lightSlider 的 JQuery 示例:http://sachinchoolur.github.io/lightslider/这个网站上有 2 个示例，我想让我的示例类似于第二个红色示例。

我尝试在我的元素上使用 lightSlider 类，但没有看到任何变化。

这是我的 HTML:

  <div class="row whiteBG" id="lightSlider">
        @foreach (var item in Model)
        {

            <div class="col-sm-3 align-centre">
                <img src="@item.OutputImage" alt="@item.Image" />

                <a href="@Url.Action("Products", "Home", new { id = item.Id, categoryName = item.Name })">
                    <div class="blend-box-top category-head" style="background: #0197BA url(@item.OutputImage) no-repeat 50% 0%;">
                        <div class="item-container">

                            <div class="desc-plus">
                                <p>@item.Name</p>
                                <p>+</p>
                            </div>
                        </div>
                    </div>
                </a>
            </div>
        }
    </div>

我有一行添加了多个 col-sm-3 div 元素。

我还将它放在结束正文标记之前的 HTML 下方:

<script type="text/javascript">
  $(document).ready(function() {
    $("#lightSlider").lightSlider(); 
  });
</script>

我使用的是 Visual Studio，JQuery 默认加载在 _Layout.cshtml 文件的底部:

    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)
</body>
</html>

Answer 1

<div class="col-sm-2 align-centre">

将您的类(class)从 3 > 2 更改为适合 5。