Owl Carousel - 导航按钮移动页面中的所有滑块

Posted

技术标签:

【中文标题】Owl Carousel - 导航按钮移动页面中的所有滑块【英文标题】:Owl Carousel - Navigation Buttons move all sliders in the page 【发布时间】:2021-12-13 11:25:27 【问题描述】:

我在一个页面中有多个 Owl Carouse 滑块。问题是当我使用一个滑块的控制按钮时,它会移动页面中的所有滑块。

我使用此函数根据唯一 id 初始化滑块

function property_slider_v2(slider_id)   
    console.log('we do '+slider_id);
    jQuery('#'+slider_id).owlCarousel(
        loop:true,
        margin:0,
        nav:true,
        items:6,
        dots:false,
        mouseDrag:true,
        video:true,
        autoHeight: true,
        autoWidth:true,
        stagePadding:0,
       // rtl:true,
        navText : [
            '<i class="fas fa-arrow-left"></i>',
            '<i class="fas fa-arrow-right"></i>'
        ],
    );
  

html 标记看起来像这样(页面在 php 中)

$slider_id='property_slider_carousel_elementor_v2_'.rand(1,99999);
.....
<div class="owl-carousel owl-theme " id="'.$slider_id.'" data-auto="">
......
</div>

print'<script type="text/javascript">
    //<![CDATA[
      jQuery(document).ready(function()
        property_slider_v2("'.$slider_id.'");
      );
    //]]>
</script>';

除了“一个按钮控制所有”问题之外,所有滑块都可以正常工作。

【问题讨论】:

$slider_id 对于所有轮播总是相同的。逻辑错误。例如。您生成 id 4416,然后打印启用轮播#4416 的脚本,似乎所有轮播都有 id 4416。您需要为每个轮播生成单独的 id。以及每个轮播的单独初始化。 我认为我没有正确解释。我为 4416 打印 html,然后为 4416 触发 owl,在我为 5555 打印 html 并为 5555 触发 owl 之后,我就拥有了。 js 函数位于每个 html 标记的末尾 - 所以 5 个 id,-> 5 个标记,每个标记后面都是 js 函数。此外,我对查看源代码进行了三次检查,并使用唯一 ID 调用 js 函数 - 也由 console.log in 函数检查。谢谢 只是一个错字——我修正了。真正的代码在两个地方都使用了 property_slider_v2 。感谢您发现这一点。 所以看起来一切都是正确的。我在代码中看到“elementor”名称。是wordpress插件吗?我使用这个插件。有一个假设 - Elementor 可以与您的脚本并行初始化轮播。导航 btns 可能存在问题。页面上有调用:(".owl-carousel").owlCarousel 可以查看源码吗? 我的意思是,elementor可以按类调用轮播的通用初始化 【参考方案1】:

OwlCarousel 插件中的 hashListener 函数存在问题。 当您创建 html 并且不需要哈希导航时 - 不要将属性 data-hash="..." 放入轮播项目的 html 标记中。

【讨论】:

确实问题在于标记中有数据散列 - js 代码中是否有 URLhashListener:false 并不重要

以上是关于Owl Carousel - 导航按钮移动页面中的所有滑块的主要内容,如果未能解决你的问题,请参考以下文章

Owl Carousel,制作自定义导航

OwlCarousel2左右按钮怎么赋值自己写的

无法在页面上使用超过两个 owl carousel 2 缩略图

如何将 Owl Carousel 中的图像居中

如何在 Owl carousel 中显示多个项目?

使用 owl carousel 在触摸设备上滑动时禁用垂直滚动