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.