Owl Carousel not working in bootstrap modal - html

Question

I have a parent page where I have a block of the list and in each list, I have images where on the image div I have implemented Owl Carousel and it is working fine.On each list the there is a button on clicking the button a modal will open and I want to implement Owl Carouse there but in the modal Owl carousel is not working as expected.
In main page I have implement Owl like this
$(".owl-carousel").owlCarousel({
loop: false,
autoPlay: false,
stopOnHover: false,
navigation: true,
pagination: false,
paginationNumbers: false,
responsiveClass: true,
//loop: true,
//margin: 10,
//nav: true,
responsive: {
0: {
items: 2
},
600: {
items: 2
},
1000: {
items: 3
},
1360: {
items: 3
}
}
});
And in Modal I have implemented Owl like this
$('#package-details').on('shown.bs.modal',
function () {
debugger;
$("#pckg-app-list").owlCarousel({
loop: false,
autoPlay: false,
stopOnHover: false,
navigation: true,
pagination: false,
paginationNumbers: false,
responsiveClass: true,
responsive: {
0: {
items: 2
},
600: {
items: 2
},
1000: {
items: 3
},
1360: {
items: 3
}
}
});
});
In modal Owl is generated this way in HTML which is wrong because there is no outer elemnt applying.
<div class="owl-carousel owl-theme yesscroll px-0 owl-loaded owl-drag" id="pckg-app-list"><div class="item"> <img class="owlimage" src="https://appsdrive.blob.core.windows.net/applogos/aeb6cee7-3951-4fe6-af63-f656b2a8bdb9_SAp-business-one.png"> </div><div class="item"> <img class="owlimage" src="https://appsdrive.blob.core.windows.net/applogos/3334f37d-bd1e-419a-89bc-28544ddb4e8c_magento.png"> </div></div>

Answer 1

function showModal() {
$('.modal').on('show.bs.modal', function (event) {
$('.owl-carousel').owlCarousel({
loop: true,
margin: 10,
nav: true,
navText: [
"<i class='fa fa-caret-left'></i>",
"<i class='fa fa-caret-right'></i>"
],
autoplay: true,
autoplayHoverPause: true,
responsive: {
0: {
items: 1
},
600: {
items: 3
},
1000: {
items: 5
}
}
})
})
$(".modal").modal("show");
}
.carousel-wrap {
margin: 90px auto;
padding: 0 5%;
width: 80%;
position: relative;
}
/* fix blank or flashing items on carousel */
.owl-carousel .item {
position: relative;
z-index: 100;
-webkit-backface-visibility: hidden;
}
/* end fix */
.owl-nav > div {
margin-top: -26px;
position: absolute;
top: 50%;
color: #cdcbcd;
}
.owl-nav i {
font-size: 52px;
}
.owl-nav .owl-prev {
left: -30px;
}
.owl-nav .owl-next {
right: -30px;
}
.btn-modal-close {
width: 32px;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.1.3/assets/owl.carousel.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="https://use.fontawesome.com/826a7e3dce.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.1.3/owl.carousel.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/js/bootstrap.bundle.min.js"></script>
<a class="btn btn-primary" href="javascript:void(0);" onclick="showModal()">Click Here</a>
<div class="modal" tabindex="-1">
<div class="modal-dialog modal-xl">
<div class="modal-content">
<div class="modal-body">
<div class="d-flex justify-content-center mb-2 justify-content-md-end">
<button type="button" class="close btn-modal-close" data-dismiss="modal" aria-label="Close">
<span>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 29.24 29.24">
<g fill="none" stroke="#52bbab" stroke-miterlimit="10">
<path d="m28.22 28.88-27.87-27.86" />
<path d="m.35 28.88 28.53-28.53" />
</g>
</svg>
</span>
</button>
</div>
<div class="container-fluid">
<div class="carousel-wrap">
<div class="owl-carousel">
<div class="item"><img src="http://placehold.it/150x150"></div>
<div class="item"><img src="http://placehold.it/150x150"></div>
<div class="item"><img src="http://placehold.it/150x150"></div>
<div class="item"><img src="http://placehold.it/150x150"></div>
<div class="item"><img src="http://placehold.it/150x150"></div>
<div class="item"><img src="http://placehold.it/150x150"></div>
<div class="item"><img src="http://placehold.it/150x150"></div>
<div class="item"><img src="http://placehold.it/150x150"></div>
<div class="item"><img src="http://placehold.it/150x150"></div>
<div class="item"><img src="http://placehold.it/150x150"></div>
<div class="item"><img src="http://placehold.it/150x150"></div>
<div class="item"><img src="http://placehold.it/150x150"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>