#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.Карусель отображается вертикально, а не горизонтально.Пожалуйста, направьте меня.