CODEWITHSUNDEEP
jqueryajaxowl-carouselowl-carousel-2
Champ Decay
Champ Decay

Reputation: 228

Owl Slider not working after AJAX Resposse

Here, I have a page where Data changes by Ajax in id="Products", But here Slider not work correctly. When data changes Slider Not working.

In Console, I'm getting this error. Uncaught TypeError: $(...).owlCarousel is not a function

Also i have tried to put slider css and js in Ajax File. But still not working. also looked many SO Questions but not found any perfect solution.

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

Upvotes: 0

Views: 2849

Answers (2)

sunny chidi
sunny chidi

Reputation: 94

similar question on stackoverflow here and here. Are you sure you loaded the carousel plugin (js file)?. Try moving it to the top of your scripts just after 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>

Try destroying and re-initializing your carousel in your success function

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

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

Upvotes: 0

nipunasudha
nipunasudha

Reputation: 2607

In the success: function of the AJAX call, you have to reinitialize the Owl Slider.

success: function() {

    //Add success code here

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

This forces Owl Slider to regenerate the slider from changed data.

Upvotes: 1

Related Questions