猫头鹰轮播在使用 jQuery '.load()' 获取外部页面内容后停止工作

编程问答 2022-05-14

问题描述

我已经配置了 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,});

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

javascriptjqueryowl-carousel