无法在 owl-carousel 中添加数据，并且数据在 Spring Boot、JSP、Ajax 中应该是可重复的

Question

我正在开发一个 Web 应用程序，我是 owl-carousel 的新手。 通过使用 ajax，我有类别列表，我想在 div 中显示该类别，并具有与每个类别相关的类别名称和图像。

下面是在滑块中为重复项提供过渡的 div：

<div class="brand-area">
     <div class="container">
          <div class="brand-slider owl-carousel owl-nav-style owl-nav-style-2" id="brand-slider">
               <div class="brand-slider-item" id="cate_slider"> <!-- Trying to add category name and image inside this div using innerhtml -->
                    <a href="#" data-wdgt="">
                        <div class="category_headingtop">
                             <img src="public/web/assets/images/rose.png">
                        </div>
                        <div class="category_headingtopa">
                             <h6>Flowers</h6>
                        </div>
                    </a>
               </div>
          </div>
     </div>
</div>

下面是使用 Ajax 从数据库中获取类别列表的脚本：

function getcategoryslider(){
            var url = "api/getactivecategory";
            $.post(url, {
                
            }, function(data, status) {
                if (data.status == "OK") {
                    if (data.statusCode == 1) { 
                        var div = "";
                        var categorylist = data.response;
                        var categorylistlength = categorylist.length; 
                        if(categorylistlength > 0){
                            for(var i = 0; i < categorylistlength; i++){
                                var categoryname = categorylist[i].name;
                                var categoryimg = categorylist[i].img;
                                if(null != categoryname && null != categoryimg){
                                    div = div + "<a href=\"#\" data-wdgt=\"\">"
                                        +"<div class=\"category_headingtop\"><img src='../"+categoryimg+"'>"
                                        +"</div><div class=\"category_headingtopa\"><h6>"+categoryname+"</h6></div></a>";
                                }
                            }
                        }
                        document.getElementById('cate_slider').innerHTML = div;  
                    } else {
                        var error = data.responseMessage;
                        swal(error, "", "error");
                    }
                } else {
                    var error = data.responseMessage;
                    swal(error, "", "error");
                }
            });
        } 

我不知道为什么会这样。 如果有人有任何建议，将永远值得赞赏。

下图中的数据是静态的。 我想显示动态数据，即数据库中的数据。