I am using owl-carousel which is working pretty good when I load items directly. Although, when I try to load items through AJAX, those been rendered but not been displayed properly and not even navigation works.

JQuery to initialize carousel

    $(".pos-carousel").owlCarousel({
    center: true,
    items: 1,
    loop: true,
    margin: 15,
    nav: true,
    responsive: {
        640: {
            items: 2,
            autoWidth: true,
            margin: 30
        }
    }
});

HTML....

<div id="creationSelectItem">
<div class="module-content carousel owl-carousel owl-theme pos-carousel creationSelectItem-carousel">
</div>

JQuery that loads the items

    $(".brand-selection-item img").click(function () {
    var selectedBrand = $(this).attr('data-selected-Brand');

    $.get("/umbraco/surface/POSCreate/GetTypeStyleOptions", { brandName: selectedBrand }, function (data) {
        $(".creationSelectItem-carousel").html(data);
    });
});

I get this log on console: error log Any help is wele!

I am using owl-carousel which is working pretty good when I load items directly. Although, when I try to load items through AJAX, those been rendered but not been displayed properly and not even navigation works.

JQuery to initialize carousel

    $(".pos-carousel").owlCarousel({
    center: true,
    items: 1,
    loop: true,
    margin: 15,
    nav: true,
    responsive: {
        640: {
            items: 2,
            autoWidth: true,
            margin: 30
        }
    }
});

HTML....

<div id="creationSelectItem">
<div class="module-content carousel owl-carousel owl-theme pos-carousel creationSelectItem-carousel">
</div>

JQuery that loads the items

    $(".brand-selection-item img").click(function () {
    var selectedBrand = $(this).attr('data-selected-Brand');

    $.get("/umbraco/surface/POSCreate/GetTypeStyleOptions", { brandName: selectedBrand }, function (data) {
        $(".creationSelectItem-carousel").html(data);
    });
});

I get this log on console: error log Any help is wele!

• javascript
• jquery
• ajax
• owl-carousel

Share Improve this question Follow edited Sep 12, 2017 at 8:34 asked Sep 12, 2017 at 8:07 user8596307user8596307

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

you need to initialize the carousel after loading the data :

$.get("/umbraco/surface/POSCreate/GetTypeStyleOptions", { brandName: selectedBrand }, function (data) {
     $(".creationSelectItem-carousel").html(data);
     $(".pos-carousel").owlCarousel({
        center: true,
        items: 1,
        loop: true,
        margin: 15,
        nav: true,
        responsive: {
           640: {
              items: 2,
              autoWidth: true,
              margin: 30
           }
       }
    });
});

Add carousel js inside success function..

jQuery.ajax({
    type: "POST",
    url: "file.php",
    cache: false,
    beforeSend: function() {
        //add loader before send
    },
    success: function(html) {
        //owl carosel slider js here
        jQuery(".creationSelectItem-carousel").html(html);
        jQuery(".pos-carousel").owlCarousel({
            center: true,
            items: 1,
            loop: true,
            margin: 15,
            nav: true,
            responsive: {
                640: {
                    items: 2,
                    autoWidth: true,
                    margin: 30
                }
            }
        });
    }
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.0/jquery.min.js"></script>

Try this, after lots of tries I can solve it.

$.ajax({
            
            type: 'POST',
            url: '/wp-admin/admin-ajax.php',
            dataType: 'html',
            data: {
              category: catName,
            },    
            success: function(response) {
                    
                    $('.show_best_top_popular').html(response);
                    
                    var owl = $('.owl-carousal');
                    
                    owl.trigger('destroy.owl.carousel');
                    
                    owl.owlCarousel({
                        loop: true,
                        margin: 10,
                        nav: true,
                    });
                }
});