如何在ajax调用后重新初始化Owl Carousel？

Question

我试图在成功的ajax调用后重新初始化owl carousel.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

我相信您将需要销毁并重新启动轮播。您可以调用一个destroy方法。

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');

也许值得尝试一下。