owl-carousel with dynamic items

Question

I am trying to make a owl-carousel. I will add items from admin panel. It will automatically add those items in carousel.

@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>

I think I have to catch the items id and have to store in a dynamic array. Then carousel will rotate the items in horizontally. But can't implement.

Answer 1

Are you trying to create multiple carousels? I feel like maybe you want to render a list of items and display them as a carousel? So you'd want something like the following:

<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>