Question

我试图在成功的ajax调用后重新初始化owl轮播。 ajax调用将更改数据，但视图应保持不变。我遇到的问题是视图轮播结构不会重新初始化。我不知道我错在哪里。

Ajax请求

floatValue()

控制器功能

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

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

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

4 个答案: