initiate owl carousel on dynamically added div

Question

I have a db containing movie info. Now i want to search through this db with a button click. When clicked, an array of search terms must be searched and returned to the view.

This all goes according to plan, but now i want to display them like:

Searchterm #1
--> carousel of movie posters for this search term.

Searchterm #2
--> carousel of movie posters for this search term.

etc..

All goes well, I can get the data and display it. The only problem is that I can't get the carousel to work.

Here is my javascript:

 function ScanForMovies()
{
    $.ajax({
        url: '@Url.Action("ScanForMovies", "Home")',
        type: 'GET',
        error: function(XMLHttpRequest, textStatus, errorThrown)
        {
            alert(errorThrown);
        },
        beforeSend: function () {
            $('#loadImage').show();
        },
        complete: function () {
            $('#loadImage').hide();
        },
        success: function (result) {
            $('#result').append('<div class="owl-carousel-v1 margin-bottom-50">');

            $.each(result, function (index, item) {
                $("#result").append('<h4 class="heading-md">' + item.Title + ' <sup>(' + item.Year + ')</sup></h4>');
                $("#result").append('<div id="' + item.Title.replace(/\s/g, '') + '" class="owl-slider">');

                $.each(item.Movies, function (ind, it) {
                    $("#" + item.Title.replace(/\s/g, '')).append('<div class="item"><img src="' + ROOT + it.Poster + '" alt="" width="120px" height="120px"/></div>');
                });

                $("#" + item.Title.replace(/\s/g, '')).append('</div>');
            });

            $('#result').append('</div>');


        },
        async: true,
        processData: false
    });
}

This is how I initiate owl carousel:

$(document).ready(function ($) {

    $('.owl-slider').owlCarousel({
        loop: true,
        margin: 10,
        nav: true,
        navText: ["<", ">"],
        responsive: {
            0: {
                items: 1
            },
            600: {
                items: 3
            },
            1000: {
                items: 5
            }
        }
    });
});

As you can see I add the div dynamically. The owl carousel does not get activated.

If i manually add a carousel with images, the owl carousel works btw.

Anyone has an idea on how to solve my problem?

Thanks for reading (and hopefully responding ;))

score 1 · Answer 1 · answered Mar 25 '16 at 11:21

1

You should use owls functions to add your items, something like:

var owl = $('.owl-slider').owlCarousel({your options});
var item = '<div class=" item...">your new div</div>';
owl.data('owlCarousel').addItem(item); 
owl.reinit();

Hope that helps!

answered Mar 25 '16 at 11:21

Stuart

6,630
2
24
40

I tried to initiate owl carousel in the success after creating the div but it doesn't work. It stops the loop after i initialize. – jangtrektang Mar 25 '16 at 11:41

initiate owl carousel on dynamically added div

1 Answers1