Wow Slider не отображает данные из базы данных как слайдер

Question

Я создаю сайт электронной коммерции, используя Django и Django Rest API. В интерфейсе я использую шаблон электронной коммерции, созданный с использованием фреймворка Bootstrap 3. На веб-сайте есть слайдер Wow Slider версии 2, где товар отображается из базы данных с использованием ajax. Когда я использую простой HTML, слайдер показывает продукт горизонтально в строке, но когда я использую продукт из базы данных, все продукты отображаются вертикально, один за другим, а не в виде строки. Мой код:

      <div class="block-top-categori">
    <div class="title-of-section">Hot Categories</div>
    <div id="HotCategoriesList" class="owl-carousel nav-style2" data-nav="true" 
    data-autoplay="false" data-dots="true" data-loop="true" data-margin="20" data- 
    responsive='{"0":{"items":1},"480":{"items":2},"640":{"items":3},"768": 
    {"items":2},"992":{"items":4}}'>

    </div>

</div>


    <script>
        var xhttp2 = new XMLHttpRequest();
        xhttp2.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {

                var AllHotCategoriesList = JSON.parse(this.responseText);

                var HotCategoriesList = document.getElementById("HotCategoriesList");
                var AllHotCategoriesListLength = (AllHotCategoriesList.length);

                for (i = 0; i < 6; i++) {
                    HotCategoriesList.innerHTML +=
                        `<div class="block-top-categori-item">
                                <a href=""><img src="{% static 'images/home5/h3.jpg' %}" alt="h3"></a>
                                <div class="block-top-categori-title">Shoes Sport</div>
                            </div>`
                }

            }
        };

        xhttp2.open("GET", "{% url 'ListAddCategory' %}", true);
        xhttp2.setRequestHeader("content-Type", "application/json");
        xhttp2.send();

    </script>