Javascript 如何将div项放置到jQuery滑块中，该滑块至少显示5个元素，并使用左右滑块查看更多元素？

我在一个包含col-sm-3类的页面上有div元素。到目前为止，我有6个元素，因此，4个元素在第一行，2个在下一行，它们占据了这行的一半。我正在使用引导

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

我发现了这个名为

lightSlider

的JQuery示例：这个网站上有两个示例，我想让我的示例与第二个红色示例类似

我尝试在我的元素上使用

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>

@foreach（模型中的var项目）
{
}

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

我还将其放在了我的HTML下方的结束体标记之前：

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

$（文档）.ready（函数（）{
$（“#lightSlider”）.lightSlider（）；
});

我正在使用Visual Studio，默认情况下，JQuery加载到_Layout.cshtml文件的底部：

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

@Scripts.Render（“~/bundles/jquery”）
@Scripts.Render（“~/bundles/bootstrap”）
@RenderSection（“脚本”，必需：false）

---

将你的等级从3级改为2级，这样5级就合适了

这是我第一次使用JQuery，问题是我在HTML中包含了我在Chrome开发工具HTML中看到的所有类，用于第二个示例滑块：这不是必需的，并且会导致错误，因为我只打算使用一个类，然后自动将新类添加到我的HTML中

首先，我在我的项目中使用了lightslider.js、lightslider.css和controls.png文件，如下所示：

然后，我将folling脚本放在我的HTML页面的末尾body标记之前：

---

我希望这能帮助其他人解决类似的问题。：）

sm-3在一行上只能有4个项目，这就是引导的工作原理。这是一个12格的系统，谢谢你。我知道这一点，但我想实现这样的目标：如果你能修改你当前的代码和包含的引导程序/灯箱，我可以尝试让它为你工作这样的事情：你从他们的结构中丢失了ul和li（见他们主页上的结构）

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

    $(document).ready(function () {
        window.prettyPrint && prettyPrint()

        $('#content-slider').lightSlider({
            keyPress: false,
            item: 5,
            loop: true,
            onSliderLoad: function () {
                $('#content-slider').removeClass('cS-hidden');
            }
        });

    });
</script>

<div class="row whiteBG">

        <ul id="content-slider" >

            @foreach (var item in Model)
            {
                <li class="col-sm-4 align-centre">
                    <a href="@Url.Action("Products", "Home", new { id = item.Id, categoryName = item.Name })">

                        <img src="@item.OutputImage" alt="@item.Image" />

                        <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>
                </li>
            }

        </ul>

    </div>