Как повторно инициализировать Owl Carousel после вызова ajax?

Question

Я пытаюсь повторно инициализировать карусель совы после успешного вызова AJAX. Вызов ajax изменит данные, но представление должно остаться прежним. У меня возникла проблема, при которой структура карусели представления не будет повторно инициализирована. Я не знаю, где я ошибся.

Ajax Request

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

Я считаю, что вам нужно будет уничтожить и заново инициализировать карусель. Существует метод уничтожения, который вы можете вызвать;

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

Может стоит попробовать.

Answer 3

Это был мой подход, и он работает с версией 2.2.1:

$.getJSON('testimonials.json', function(data) {

    var content = "";
        for(var i in data["items"]){

             var text = data["items"][i].text;
             var name = data["items"][i].name;
             var position = data["items"][i].position;

             content += text + name + position
        }

        // set the content inside the element
        $("#test_slider").html(content);

        // Now we can call the owlCarousel
        $('#test_slider').owlCarousel({
            dots: false,
            nav: true,
            loop: true,
            margin:30,
            smartSpeed: 700,
            items:1,
            autoplay:true,
        });
});

Что касается testimonials.json, он выглядит так:

{
  "items" :
  [
    {
      "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem Ipsum has been the Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text of the printing.",
      "name": "Maurice Pittmansss",
      "position": "CEO of ABS Ltd.1"
    },
    {
      "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem Ipsum has been the Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text of the printing.",
      "name": "Maurice Pittmanggg",
      "position": "CEO of ABS Ltd.2"
    },
    {
      "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem Ipsum has been the Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text of the printing.",
      "name": "Maurice Pittmannnn",
      "position": "CEO of ABS Ltd3."
    }
  ]
}

Answer 4

Ничего из вышеперечисленного не сработало для меня, только это сработало:

$('.owl-gallery').data('owlCarousel').destroy();
$('.owl-gallery').owlCarousel(options);