带有动态项目的猫头鹰轮播答案

【问题标题】：owl-carousel with dynamic items带有动态项目的猫头鹰轮播
【发布时间】：2023-05-15 05:51:01
【问题描述】：

我正在尝试制作猫头鹰旋转木马。我将从管理面板添加项目。它会自动将这些项目添加到轮播中。

@for (int a = 0; a < Model.Count; a += 1)
            {
                <div class="owl-carousel owl-theme">
                    @if (Model.Count > a)
                    {
                        <div class="item-box item">
                            @Html.Partial("_ProductBox", Model[a])
                        </div>
                    }


                </div>

                <script>
                $(document).ready(function() {
                    var owl = $('.owl-carousel');
                    owl.owlCarousel({
                        items: 3,
                        loop: true,
                        margin: 10,
                        autoplay: true,
                        autoplayTimeout: 1000,
                        autoplayHoverPause: true
                    });

                })
                </script>
            }
        </div>

我想我必须捕获项目 id 并且必须存储在动态数组中。然后 carousel 将水平旋转项目。但无法实现。

【问题讨论】：

那么你的问题是什么？您期望发生什么以及实际发生了什么？你遇到了什么错误？
实际上没有错误。项目未显示在轮播中。它们是垂直来的。
我已经添加了我的想法。

标签： jquery asp.net-mvc-5 owl-carousel jcarousel

【解决方案1】：

您是否要创建多个轮播？我觉得也许您想呈现项目列表并将它们显示为轮播？因此，您需要以下内容：

<div class="owl-carousel owl-theme">
    @foreach(var m in Model) {
        <div class="item-box item">
            @Html.Partial("_ProductBox", m)
        </div>
    }
</div>

<script type="text/javascript">
    $(document).ready(function() {
        var owl = $('.owl-carousel');
        owl.owlCarousel({
            items: 3,
            loop: true,
            margin: 10,
            autoplay: true,
            autoplayTimeout: 1000,
            autoplayHoverPause: true
        });
    })
</script>

【讨论】：