"owl carousel" not working when appending data dynamically using jquery

Question

I'm appending the data dynamically to "owl carousel" and initially the data is showing correctly and next (when I click the button) I'm erasing and re-assigning the data to the "owl carousel" (because the data will keep change) at that time the data is not appending properly to the "owl carousel" div and I have followed this document also.

Image example

initially page load:-

After click the indices button:-

The entire logic is below

Using links are:-

<!-- Owl Carousel CSS -->

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css">

    <!-- jQuery -->

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

    <!-- Owl Carousel JS -->

    <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>

jQuery logic is:-

$(document).ready(function () {

   

 $('#indices_carousel_intraday').owlCarousel({

        items: 4,

        loop: false,

        //autoplay: true,

        //autoplayTimeout: 8500,

        margin: 12,

        nav: false,

        dots: true,

        navText: ['<i class="fa fa-angle-left"></i>', '<i class="fa fa-angle-right"></i>'],

        responsive: {

            0: {

                items: 1

            },

            768: {

                items: 3

            },

            1170: {

                items: 3

            },

            1440: {

                items: 4

            }

        }

    });

IntradayPicksIndicesTab();

});

function IntradayPicksIndicesTab() {

    var i_ind_data = "";

    $("#indices_carousel_intraday").empty();

        for (var i = 0; i < 4; i++) {

            i_ind_data += `<div class="card h-100 lavenderBG border-0 radius24">

                                <div class="card-body p-md-4 p-3">

                                    <small class="px-2 py-0 greenLightBG rounded">BUY</small>

                                    <div class="row align-items-center mt-0 mb-1 mb-md-0 ">

                                        <div class="col-12 col-md-9 cardTitle">BANKNIFTY23NOVFUT</div>

                                        <div class="col-12 col-md-3 text-right mt-2 mt-md-0">

                                            <input type="submit" value="Trade" class="btn btn-success btn-sm w-100 w-md-auto">

                                        </div>

                                    </div>

                                    <small>11:00:25</small>

                                    <div class="row align-items-center my-2 justify-content-around">

                                        <div class="col-md-3 col-4 d-flex">

                                            <small class="texGrayDark me-1">Entry:</small>

                                            <span>100.25</span>

                                        </div>

                                        <div class="col-md-3 col-4 d-flex">

                                            <small class="texGrayDark me-1">LTP:</small>

                                            <span class="textSuccess">105.25</span>

                                        </div>

                                    </div>

                                    <div class="row align-items-center my-3 ">

                                        <div class="col-md-3 col-4 d-flex flex-column">

                                            <small class="texGrayDark">Qty</small>

                                            <span>15</span>

                                        </div>

                                        <div class="col-md-3 col-4 d-flex flex-column">

                                            <small class="texGrayDark">TPL</small>

                                            <span class="textBlue">798</span>

                                        </div>

                                        <div class="col-md-3 col-4 d-flex flex-column">

                                            <small class="texGrayDark">Inv.</small>

                                            <span>96687</span>

                                        </div>

                                        <div class="col-md-3 col-12 d-md-flex flex-md-column">

                                            <small class="texGrayDark">Status</small>

                                            <span>Auto Close</span>

                                        </div>

                                    </div>

                                    <div class="row align-items-center ">

                                        <div class="col-12 mt-0">

                                            <small class="d-flex justify-content-between py-1 px-2 bg-white rounded">

                                                <div>Target: 1000.56</div>

                                                <div>Stop Loss: 250.69</div>

                                            </small>

                                        </div>

                                    </div>

                                </div>

                            </div>`;

        }

        $("#indices_carousel_intraday").append(i_ind_data);

        ////Refresh Owl Carousel after content change

        $('#indices_carousel_intraday').trigger('refresh.owl.carousel');

    }

Asp.net(HTML) code:-

<a href="javascript://" class="nav-link active" id="nav_indices_tab" onclick="IntradayPicksIndicesTab();" data-bs-toggle="tab" data-bs-target="#indices"

                                type="button">Indices</a>

<div class="tab-pane fade active show" id="indices">

 <div class="owl-carousel mt-3" id="indices_carousel_intraday">

  <!-- dynamic data will append here -->

     </div>

  </div>

I'm not sure where I did the mistake and how to achieve this concept

Suggest me where I did the mistake and how to solve this issue.

Sorry for my bad English.

Answer 1

Hi @Ashok Kumar,

You need to change the following two places

Change

To:

<div class="owl-carousel owl-theme" id="indices_carousel_intraday">
    <!-- dynamic data will append here -->
</div>

Change

To:

 $('#indices_carousel_intraday').trigger('destroy.owl.carousel');
 $('#indices_carousel_intraday').owlCarousel();

Best regards,
Lan Huang

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.