Карусель Owl отображается вертикально вместо горизонтальной, и элемент owl отсутствует

#javascript #jquery #owl-carousel

#javascript #jquery #owl-carousel

Вопрос:

У меня реализована карусель owl при загрузке страницы, и 2 элемента отображаются одновременно, как и ожидалось.Однако у меня есть карта Google, показывающая местоположение дилера, по щелчку дилера элемент должен быть добавлен во втором месте.Я просто использую splice и хочу, чтобы он отображался вместе с добавленным элементом.Итак, я передаю массив по той же логике добавления элемента, что и ранее, я замечаю, что карусель отображается вертикально, а не горизонтально, показывая один элемент.Не могли бы вы, пожалуйста, подсказать, как обновить карусель, чтобы она отображалась как раньше.

 var navBarLi;
    var navBarHtml;
    if(apz.PostLo.DealerDetails.bkpnavBarLiHtml amp;amp; apz.PostLo.DealerDetails.bkpNavBarLi){

            navBarLi = apz.PostLo.DealerDetails.bkpNavBarLi;
            navBarHtml = apz.PostLo.DealerDetails.bkpnavBarLiHtml;


    }
    else{

     navBarLi = $("#PostLo__DealerDetails__ps_pls_7");

     apz.PostLo.DealerDetails.bkpNavBarLi = navBarLi;
     navBarHtml = navBarLi.html();
     apz.PostLo.DealerDetails.bkpnavBarLiHtml = navBarHtml;

    }

    const arrayOfNavBarLi = array.reduce((p,n)=>{
        p  = navBarHtml;
        return p;
    }
    , "");

    navBarLi.html(arrayOfNavBarLi);


    array.forEach((object, index) => {

        for (key in object) {
            apz.PostLo.DealerDetails.manualBinding_assignValue(object, index, key,navBarLi);
        }
    }) 

    navBarLi.owlCarousel({
        navigation: true,
        items: 2,
        center: true,
        margin: 0,
        lazyLoad: true,
        dots: true
    });

    navBarLi.trigger('refresh.owl.carousel');
  

Приведенный выше код считывает компонент и создает копию html и элемента, и он повторяется в соответствии с элементами массива.Единственная форма содержит элементы с одинаковыми элементами id.Компонент вызывает owl carousel при загрузке.
При нажатии дилера на карте элементу, объявленному глобально, присваивается переменная и ее HTML-содержимое.Содержимое повторяется, как и раньше, и снова присваивается owl-carousel.Карусель отображается вертикально, а не горизонтально.Пожалуйста, направьте меня.