我已经配置了owl carousel，它在页面上工作，但在.load（）外部将相同的内容放入另一个页面，它不工作。我尝试了不同的方法和做法，但仍然不起作用。有什么办法吗？

// Dynamic model content 
/* It is taking modal content from page shop-single-modal.html and loads into target div*/
$("body").on("click", '[data-toggle="modal"]', function () {
// Target Modal
let targetDiv = $($(this).data("target") + " .modal-body");

// Remote Modal ID from attribute value: data-remote="value"
let modalId = $(this).data("remote");

// Target Modal Heading
$($(this).data("target") + " .modal-header h4").text(
`Modal remote Id is : ${modalId}`
);

// Target modal content replaced with the modal content loaded via specific path
targetDiv.load(
`shop-single-modal.html ${$(this).data("target")} .modal-body`
);
});

// Owl Config in pug
.product-carousel.owl-carousel.gallery-wrapper.dots-inside#qv-main
    a(href='img/shop/single/01.jpg' data-size='1000x667' data-sub-html=".caption1").item
    img(src='img/shop/single/01.jpg' alt='Product')
    a(href='img/shop/single/02.jpg' data-size='1000x667' data-sub-html=".caption2").item
    img(src='img/shop/single/02.jpg' alt='Product')
    a(href='img/shop/single/03.jpg' data-size='1000x667' data-sub-html=".caption3").item
    img(src='img/shop/single/03.jpg' alt='Product')
    a(href='img/shop/single/04.jpg' data-size='1000x667' data-sub-html=".caption4").item
    img(src='img/shop/single/04.jpg' alt='Product')
    a(href='img/shop/single/05.jpg' data-size='1000x667' data-sub-html=".caption5").item
    img(src='img/shop/single/05.jpg' alt='Product')

// Owl Js config
var sync1 = $("#qv-main");
sync1.owlCarousel({
    items: 1,
    slideSpeed: 2000,
    nav: true,
    autoplay: true,
    dots: true,
    loop: true,
    responsiveRefreshRate: 200,
});