Динамически добавить несколько Сов Карусель 2 - PullRequest
Новая
       42

Динамически добавить несколько Сов Карусель 2

0 голосов
/ 25 сентября 2018

Я только что разработал приложение для просмотра фильмов.

Мне нужно добавить две или более динамических карусели для сов.Я потратил время, пытаясь развить это, но я не получил никакого результата.

Вот мой Javascript, movieList представляет собой набор некоторых деталей фильма и изображений.Я использую cate_list в качестве внешнего div. 

for (let i = 1; i < movieList.length; i++) {
    topBottomcount++
    var getMediaData = movieList[i].mediaDeta;
    if (getMediaData == undefined) {
        console.log("Data not Available")
    } else {
        count++;
        $('<div class="cate_list' + i + ' film_listing"><div class="col-sm-12"><h2 class="cat_head">' + movieList[i].categoryText + '</h2> </div></div>').appendTo('.search_wrap');
        var cate_list = '.cate_list' + i;
        $('body').find(cate_list).append('<div class="owl-carousel owl-theme owl_caro' + i + '"></div>');
        for (let j = 0; j < getMediaData.length; j++) {
            console.log(getMediaData[j]);
            count++;
            var owl_caro = '.owl_caro' + i;
            $('body').find(owl_caro).append(' <div class="item"><img id="' + getMediaData[j].id + '"class="category' + count + ' top_bottom_foc' + topBottomcount + '"  src="' + getMediaData[j].thumbnailUrl + '"   onError="this.src=\'images/movie_library/avengers.jpg\';"></div>');

        }
        owldraw(owl_caro);
    }

}
function owldraw(owl_caro) {
var owl = $(owl_caro);
owl.owlCarousel({
    margin: 10,
    nav: true,
    loop: true,
    responsive: {
        0: {
            items: 1
        },
        600: {
            items: 3
        },
        1000: {
            items: 6
        }
    }
});

}

и html 

                <section class="search_wrap">


                <div class="col-sm-12">
                    <h2>Movies</h2>
                </div>
                <div class="film_listing">

                </div>
            </section>
...