Owl旋转木马不工作于引导模态

Question

我有一个父页面，其中我有一个列表块，在每个列表中，我有图像，在图像div上，我已经实现了猫头鹰旋转木马，它正在运行fine.On每个列表，有一个按钮点击一个模式将打开的按钮，我想在那里实现猫头鹰，但在模式猫头鹰旋转木马并不像预期的那样工作。

在主页中，我像这样实现了猫头鹰

$(".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
                }
            }

        });

在Modal中，我像这样实现了猫头鹰

$('#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
                        }
                    }

                });
            });

在模态中，猫头鹰是这样在HTML中产生的，这是错误的，因为没有外部元素应用。

<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>

​