ajax呼び出し後にOwl Carouselを再初期化する方法は？

Question

ajax呼び出しが成功した後、私はowlカルーセルを再初期化しようとしています。 ajax呼び出しはデータを変更しますが、ビューは同じままでなければなりません。ビューのカルーセル構造が再初期化されないという問題があります。私はどこで間違ったのか分かりません。

のAjaxリクエスト

$(document).on('click', '.category_list', function() { 
    var category_id = $(this).attr('data-id'); 
    var _token = $('#_token').val(); 
    var param = 'category_id=' + category_id + '&_token=' + _token; 
    $.ajax({ 
     type: "POST", 
     datatype: "json", 
     url: "/master/sub_category", 
     data: param, 
     success: function(result) { 
      $('#test').html(result); 
      var owl = $(".owl-carousel"); 
      owl.owlCarousel({ 
       items: 4, 
       navigation: true 
      }); 
     } 
    });  
}); 

コントローラ機能

public function getImg() { 
    $post_data = Request::all(); 
    $sub_img = $this->imgModel->getImgList($post_data); 
    $sub_img_html = ''; 
    foreach ($sub_img ['data'] as $data_img) { 
     $img = '/img/sub_category/'.$data_img ['img'];    
     $sub_img_html .= '<div class="item">'; 
     $sub_img_html .= '<img src="'.$img.'" />'; 
     $sub_img_html .= '</div>'; 
    } 
    echo $sub_img_html; 
} 

ビュー

<div id="demo"> 
    <div id="test" class="owl-carousel"> 
     <?php 
      if (!empty($img_category)) { 
       foreach ($img_category as $imgcategory){ 
     ?> 
     <div class="item"> 
      <img src='/img/sub_category/<?= imgcategory['subcategory_img'] ?>'/></div> 
     <?php 
      } 
     } 
    ?> 
    </div> 
</div> 

Answer 1

あなたのコードごとに私は変更を加えてくださいこれを適用してください私はこのコードがうまくいったことを願っています。

success: function(result) {    
      $('#demo').html('<div id="testing" class="owl-carousel"></div>'); 
      for(var i=0;i<result.length;i++){ 
       $(".owl-carousel").append('<div class="item"><img src="/img/sub_category/'+result[i].subcategory_img+'" /></div>'); 
      }; 
      var owl = $("#testing"); 
      owl.owlCarousel({ 
       items: 4, 
       navigation: true 
      }); 

Answer 2

私はあなたがカルーセルを破壊し、再initalizeする必要があると考えています。呼び出し可能な破棄メソッドがあります。

https://github.com/OwlCarousel2/OwlCarousel2/blob/develop/src/js/owl.carousel.js#L1391

またはリフレッシュ方法があります。

https://github.com/OwlCarousel2/OwlCarousel2/blob/develop/src/js/owl.carousel.js#L608

または更新方法があります。

https://github.com/OwlCarousel2/OwlCarousel2/blob/develop/src/js/owl.carousel.js#L569

私はこれらをすべて呼び出すことができると考えています。

$('.owl-gallery').owlCarousel('refresh'); 

試してみる価値があるかもしれません。