я есть веб-страница с двумя каруселями, на которой я должен показывать разные элементы в зависимости от действий пользователя.

Новые данные приходят из интернета, я использую fetch, разбираю json в массив, все хорошо.

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

Для простого примера я попробовал

var carousel = $jq("#owl-genres");
for(...) {
   carousel.owlCarousel()
       .trigger('add.owl.carousel', [$jq('<div class="item">' + genres[i] + '</div>')])
       .trigger('refresh.owl.carousel');
}

но ничего не происходит Старые элементы остаются, хотя методы выполняются и.trigger выполнен.

Я также пытался

for(...) {
   content += '<div class=\'item\'>' + genres[i] + '</div>'
   carousel.html(content)
}
carousel.owlCarousel().trigger('refresh.owl.carousel');

который действительно добавляет новые элементы в карусель, но теперь они сложены вертикально, навигация не работает, я думаю, что вся карусель сломана.

Итак, как правильно заменить предметы в Owl Carousel 2?