innerHTML property not working with owl carousel

Question

I am fetching data from firestore database to create a product card so that I can display the product cards inside a carousel. Owl carousel to be specific. I am using the innerHTML property in javascript to add the product cards programmatically. The Owl carousel seems to not work when I do so but when I create the cards statically in html the carousel works. What could be the problem?

Code:

Html:

    <div class="product-area most-popular section">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <div class="section-title">
                        <h2>Hot Items</h2>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-12">
                    <div class="owl-carousel popular-slider" id="owlCarousel">

                     <!--product cards go here-->

                    </div>
                </div>
            </div>
      </div>
  </div>

Javascript:

var view2 = document.getElementById("owlCarousel");

db.collection("products").where("hot" , "==" , true)
.get().then((querySnapshot)=> {
    querySnapshot.forEach((doc) => {

        var image = doc.data().images[0];
        var image2 = doc.data().images[1];
        var title = doc.data().title;
        var price = doc.data().pricing.toString();
        var hot = doc.data().hot;
        var discount = doc.data().discount;
        var price = doc.data().pricing;
            
           
         //product card creation

            view2.innerHTML += `

            <div class="single-product">
            <div class="product-img">
                <a href="product-details.html">
                    <img class="default-img" src="${image}" alt="#">
                    <img class="hover-img" src="${image2}" alt="#">
                    <span class="out-of-stock">Hot</span>
                </a>
                <div class="button-head">
                    <div class="product-action">
                        <a data-toggle="modal" data-target="#exampleModal" title="Quick View" href="#"><i class=" ti-eye"></i><span>Quick Shop</span></a>
                        <a title="Wishlist" href="#"><i class=" ti-heart "></i><span>Add to Wishlist</span></a>
                        <a title="Compare" href="#"><i class="ti-bar-chart-alt"></i><span>Add to Compare</span></a>
                    </div>
                    <div class="product-action-2">
                        <a title="Add to cart" href="#">Add to cart</a>
                    </div>
                </div>
            </div>
            <div class="product-content">
                <h3><a href="product-details.html">${title}</a></h3>
                <div class="product-price">
                    <span>Ksh. ${price}</span>
                </div>
            </div>
        </div>

        `


    });

});

Issue: After instantiation, if you add any other html it won't consider it as the new slide it will consider it as just html. Solution: `Owl carousel` or any other `carousels` has a common method `add` or `append` slides use that to append the html or make sure you re-instantiate the carousel again when you append the html with `innerHTML` — kunal panchal, Feb 22 '21 at 08:10
could you please share the what methods have you tried and from which part of documentation (Link please) ? — kunal panchal, Feb 23 '21 at 08:39
Here is the github link to the gist. It has the javascript method I tried https://gist.github.com/ShoppableDevTeam/d1d389cc451e36fc338cb41e741993c6 — James Gitonga, Feb 23 '21 at 08:52
okay i will give you a ready made solution on this. ignoring the link above. — kunal panchal, Feb 23 '21 at 08:54
Ok try this one https://gist.github.com/JayExtra/6e43d07ff72ce1b3237ccda4506400e8 — James Gitonga, Feb 23 '21 at 08:56
This [Link](https://stackoverflow.com/questions/24939427/owlcarousel2-add-item-update-carousel) Might help you. — kunal panchal, Feb 23 '21 at 08:59

score 0 · Answer 1 · answered Mar 20 '21 at 16:33

I just had the same problem. What you should do is initialize the OWL CAROUSEL after you add the template (inner html);

for example:

    view.innerHtml = `<div> content </div`;
    $('.owl-carousel').owlCarousel({
        //here you can add the props or events
    })

This worked for me! hope this could hel you :)

innerHTML property not working with owl carousel

1 Answers1