在选项卡的点击功能上初始化猫头鹰轮播
initialize owl carousel on click function of tab
>我正在使用带有猫头鹰滑块和标题的选项卡结构,但由于用户想要单击的每个选项卡的唯一 URL,我将其更改为单击功能。在这里,我无法处理滑块。它只是行不通。.HTML:
<ul id="myTab" class="nav nav-tabs">
<li class="active" id="chhimi-gurung">
<a href="#tab-0" data-toggle="tab" rel="chhimi-gurung">Chhimi Gurung</a>
</li>
<li class="" id="subha-shrestha">
<a href="#tab-1" data-toggle="tab" rel="subha-shrestha">Subha Shrestha </a>
</li>
</ul>
<div id="myTabContent" class="tab-content" >
<div class="tab-pane fade active in" id="tab-0">
<h3>Chhimi Gurung</h3>
<div class="owl-carousel team-image-slider" id="team-image-slider-0">
<img src="uploads/images/team/profile-4.jpg" alt="" />
<img src="uploads/images/team/profile-3.jpg" alt="" />
</div>
</div>
<div class="tab-pane fade" id="tab-1">
<h3>Subha Shrestha</h3>
<div class="owl-carousel team-image-slider" id="team-image-slider-1">
<img src="uploads/images/team/profile-1.jpg" alt="" />
<img src="uploads/images/team/profile-2.jpg" alt="" />
<img src="uploads/images/team/profile-3.jpg" alt="" />
</div>
</div>
</div>
JQUERY:
var $owl = $('.team-image-slider');
$(document).on("click", "ul#myTab li a", function() {
var slug = $(this).attr("rel");
var current_url = url.substring(0,url.lastIndexOf("/"));
var tabId = $(this).attr("href").split("-")[1];
$owl.trigger('destroy.owl.carousel');
$owl.html($owl.find('.owl-stage-outer').html()).removeClass('owl-loaded');
$("#team-image-slider-"+tabId).owlCarousel({
autoplay: true,
autoplayTimeout: 5000,
items: 1,
nav: true,
smartSpeed: 500,
});
history.pushState(null, null, current_url + '/' + slug);
})
我该如何解决这个问题?欢迎任何帮助/建议。
找到了问题的解决方案。轮播问题是由于选项卡隐藏和显示造成的。因此添加了用于初始化轮播的超时功能。
$(document).on("click", "ul#myTab li a", function() {
var slug = $(this).attr("rel");
var current_url = url.substring(0,url.lastIndexOf("/"));
var tabId = $(this).attr("href").split("-")[1];
setTimeout(function(){
$("#team-image-slider-"+tabId).owlCarousel({
autoplay: true,
autoplayTimeout: 5000,
items: 1,
nav: true,
smartSpeed: 500,
});
}, 200);
history.pushState(null, null, current_url + '/' + slug);
})
相关文章:
- 使用javascript函数在页面初始化后加载jquery
- 未捕获错误:无法在初始化之前调用方法;
- 如何在剑道网格初始化后设置pageSizes
- React redux初始化功能,无论状态变化如何
- 为什么可以't Protractor在自动初始化的Angular网站上查找Angular
- 尝试初始化()Spine's控制器和故障
- Angular.js延迟控制器初始化
- 对插件初始化后动态加载的元素进行样式设置
- Angular JS控制器初始化错误
- 在XMLHttpRequest之后重新初始化jQuery
- ember-js组件初始化不同的函数
- Youtube JavaScript API不是't正在初始化
- 函数无法识别初始化的变量
- datepicker引导程序再次初始化
- jquery数据表在初始化时设置宽度
- 如何使用app和secret进行安全的解析初始化
- 从javascript中再次初始化c变量
- ng重复中的ng模型-初始化唯一作用域属性
- 在猫头鹰轮播 2 中初始化后更新选项
- 在选项卡的点击功能上初始化猫头鹰轮播