javascript - Owl Carousel - 导航按钮移动页面中的所有滑块
问题描述
我在一个页面中有多个 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>';
除了“一个按钮控制所有”问题之外,所有滑块都可以正常工作。
解决方案
所以 OwlCarousel 插件中的 hashListener 函数存在问题。当您创建 html 并且不需要哈希导航时 - 不要将属性 data-hash="..." 放入轮播项目的 html 标记中。
推荐阅读
- powershell - Azure 数据工厂在发布时禁用触发器
- python - 在 Python 中向正则表达式模式添加单个反斜杠
- javascript - 在 IE11 上运行 Angular 5 应用程序时参数无效
- eclipse - java.lang.NoSuchMethodError: org.slf4j.spi.LocationAwareLogger.log(Lorg/slf4j/Marker;Ljava/lang/String;ILjava/lang/String;Ljava/lang/Throwable;)V
- python - 使用 python concurrent.futures 提交进程编号
- javascript - 无法更新我的 MySQL 数据库中的一个单元格?
- python - 在烧瓶中返回 render_templates 和 jinja 模板之间的区别
- python - 调用 ensure_future 是包装协程结果的正确方法吗?
- arrays - 如何使用 Angular 5 中的数组返回的数据
- assembly - byte[rax] 在 x86 汇编中代表什么?