Question

在这里，我有一个页面，其中数据由Ajax在 id =＆＃34; Products＆＃34; 中更改，但此处Slider无法正常工作。当数据更改Slider Not working。

在控制台中，我收到此错误。未捕获的TypeError：$（...）。owlCarousel不是函数

我也尝试将滑块css和js放在Ajax文件中。但仍然没有工作。也看了很多SO问题，但没有找到任何完美的解决方案。

<div id="products">
        <div class="owl-carousel color-options">
            <div><a href="javascript:void(0);" data-full="image/2.png"><img src="image/1.png"></a></div>
            <div><a href="javascript:void(0);" data-full="image/2.png"><img src="image/2.png"></a></div>
            <div><a href="javascript:void(0);" data-full="image/2.png"><img src="image/3.png"></a></div>
            <div><a href="javascript:void(0);" data-full="image/2.png"><img src="image/4.png"></a></div>
            <div><a href="javascript:void(0);" data-full="image/2.png"><img src="image/5.png"></a></div>
            <div><a href="javascript:void(0);" data-full="image/2.png"><img src="image/1.png"></a></div>
            <div><a href="javascript:void(0);" data-full="image/2.png"><img src="image/2.png"></a></div>
            <div><a href="javascript:void(0);" data-full="image/2.png"><img src="image/3.png"></a></div>
            <div><a href="javascript:void(0);" data-full="image/2.png"><img src="image/4.png"></a></div>
            <div><a href="javascript:void(0);" data-full="image/2.png"><img src="image/5.png"></a></div>
        </div>
    </div>
</div>


<script>
$('.color-options').owlCarousel({
        loop:true,
        margin:10,
        nav:true,
        items:4,
    })
 </script>

Answer 1

在AJAX调用的success:函数中，您必须重新初始化Owl Slider。

success: function() {

    //Add success code here

    $('.color-options').owlCarousel({
        loop:true,
        margin:10,
        nav:true,
        items:4
    })
}

这会强制Owl Slider从更改的数据中重新生成滑块。

Answer 2

关于stackoverflow here和here的类似问题。你确定你加载了carousel插件（js文件）吗？尝试在jquery lib之后将其移动到脚本的顶部。

<!-- Include js plugin -->
<script src="assets/owl-carousel/owl.carousel.js"></script>
<script>
$('.color-options').owlCarousel({
    loop:true,
    margin:10,
    nav:true,
    items:4,
})
</script>

尝试在您的成功功能中销毁并重新初始化您的轮播

owl = $('.color-options');

owl.data('owlCarousel').destroy();
  owl.owlCarousel({
     loop:true,
    margin:10,
    nav:true,
    items:4,
  });

在AJAX Resposse

2 个答案: