文章/答案/技术大牛

发布

社区首页 >问答首页 >Owl Carousel -导航按钮移动页面中的所有滑块

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

Stack Overflow用户

提问于 2021-10-28 08:54:01

回答 1查看 48关注 0票数 2

我有多个猫头鹰嘉年华滑块在一个页面。问题是，当我在一个滑块上使用控制按钮时，它会移动页面中的所有滑块。

我使用此函数基于唯一的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>';

除了“一键控制所有”问题之外，所有的滑块都能正常工作。

javascript

jquery

owl-carousel

回答 1

Stack Overflow用户

回答已采纳

发布于 2021-10-28 10:19:12

因此，OwlCarousel插件中的hashListener函数存在问题。当您创建html并且不需要散列导航时-不要将属性data- hash ="...“添加到轮播项目的html标记中。

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/69751043

复制

相似问题

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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