微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

javascript – 如何在ajax调用后重新初始化Owl Carousel?

我试图在ajax成功通话后重新初始化猫头鹰旋转木马. ajax调用将更改数据但视图应保持不变.我遇到的问题是视图(轮播结构)不会重新初始化.页面加载时一切都很好.

我使用的是1.3.3版本

$(document).ready(function() {
 $(".owl-carousel").owlCarousel({
   items : 3
 });
});

Ajax调用

$.ajax({
    type: 'get',
    url: '/public/index',
    dataType: 'script',
    data: data_send,
      success: function(data) {
       $(".owl-carousel").owlCarousel({
         items: 3
       });
      }
   });
}

我错过了一些我需要做的事情吗?我在github页面上看过这个问题并尝试了这些建议,但无济于事.

编辑

根据给出的建议,我创建了这两个函数

function owlCarousel() {
  var owl = $(".owl-carousel"); 
  //init carousel
  owl.owlCarousel();
    owl.data('owlCarousel').reinit({
     items : 3
    });
}

function destroyOwlCarousel() {
  var owl = $(".owl-carousel");
  //init carousel
  owl.owlCarousel();
    owl.data('owlCarousel').destroy();
  }
}

它似乎有效,但想知道这是否是这样做的正确方法

解决方法:

以下示例有效.

初始化轮播:

owl = $("#owl-demo");

owl.owlCarousel({
  items: 10,
  autoplay: 1000,
});

当您使用ajax回调时,请尝试:

owl.data('owlCarousel').destroy();

owl.owlCarousel({
  items: 5,
  autoplay: 1000,
});

我创建了一个小提琴,向您解释如何重新初始化轮播:http://jsfiddle.net/s10bgckL/959/

PS:我没有创建一个选项数组,只是你想修改一些参数,如速度,显示项目的数量等.

我希望它有所帮助.

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐