Owl Carousel not working in bootstrap modal

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.

user_4095056 · Answer

function showModal() {
     
    $('.modal').on('show.bs.modal', function (event) {
     $('.owl-carousel').owlCarousel({
        loop: true,
        margin: 10,
        nav: true,
        navText: [
          "",
          ""
        ],
        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;
}







Click Here

Owl Carousel not working in bootstrap modal

1 Answers