動的アイテムを含むフクロウカルーセル

Question

私はフクロウカルーセルを作ろうとしています。私は管理パネルから項目を追加します。これらのアイテムをカルーセルに自動的に追加します。

@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を捕まえなければならず、ダイナミックアレイに格納する必要があると思います。次にカルーセルはアイテムを水平に回転させます。しかし、実装することはできません。

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