owl carousel doesn't work properly on ajax loaded items

Question

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

Answer 1

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