猫头鹰旋转木马响应猫头鹰点工作奇怪

Posted 2023-05-07

【中文标题】猫头鹰旋转木马响应猫头鹰点工作奇怪

【英文标题】：Owl carousel responsive owl-dots working weird

【发布时间】：2021-11-01 14:19:29

【问题描述】：

我的猫头鹰轮播有一个点数据，我只希望它有一个从 0px 到 1024px 的点数据，从 1025px 将不再有一个点数据，所以我这样写，它是只需使用 owl-nav，关于 owl-dots，我必须重新加载页面才能使其工作。请帮助我，我将不胜感激所有答案，谢谢。

$(window).on('load', function() 
const next_icon = '<img src="./images/next-icon.svg">';
const prev_icon = '<img src="./images/prev-icon.svg">';
$('.owl-carousel').owlCarousel(
    loop: true,
    margin: 30,
    items: 1,
    dots: true,
    responsiveClass: true,
    navText: [
        prev_icon,
        next_icon
    ],
    responsive: 
        0: 
            dotData: true,
            dotsData: true,
            nav: false,
        ,

        1025: 
            dotData: false,
            dotsData: false,
            nav: true,
        
    
);

)

【参考方案1】：

首先 - 没有 dotData 这样的选项。只有dotsData，如果我们谈论owl-carousel-2 版本。还有responsiveClass。 关于dotsData 在 Owl 文档（此处：https://owlcarousel2.github.io/OwlCarousel2/demos/responsive.html）中，您可以看到 仅在加载时响应的列表 中的 dotsData，因此它可以正常工作 - 仅当重新加载页面时。 因此，您必须通过 jQuery 创建另一个解决方案。例如：

jQuery(window).resize(function() 
if (window.innerWidth > 1024) 
  jQuery('.your-dot-item-class').removeAttr('data-dot');
 else 
  jQuery('.your-dot-item-class').attr('data-dot', '<p>Some content</p>');

);