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

也许值得一试。

Answer 3

以上对我来说都不起作用，只有这个有效：

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

Answer 4

这是我的方法，它适用于 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 5

我觉得这样比较好

3. 调用插件 现在调用 Owl 初始化函数，您的轮播就准备好了。

$(文档).ready(function() {

$(".owl-carousel").owlCarousel();

});

https://www.jqueryscript.net/demo/Powerful-Customized-jQuery-Carousel-Slider-OWL-Carousel/#how-to