试图将活动类添加到选定选项卡中的第一个标记。滑动滑块 - 向当前打开的基础选项卡中的第一个< a >添加活动类
我的代码被添加活性类的第一个元素的幻灯片中,准确地做我想要的滑块一个内,但后来当我更改选项卡它仍然是添加活性类导航第一滑不滑2在视图中。
JS
$(document).ready(function(){
var $slideshow = $(".slider").slick({
dots: false,
infinite: true,
speed: 300,
slidesToShow: 1,
adaptiveHeight: true,
swipeToSlide: true,
touchThreshold: 3,
arrows: false
});
$('.links').on('click', 'a', function(e) {
var slideIndex = $(this).closest('li').index();
$slideshow.slick('slickGoTo', parseInt(slideIndex));
$('.links li a').removeClass('slick-current');
$(this).addClass('slick-current');
e.preventDefault();
});
//Re draw slider when data tabs change
$('[data-tabs]').on('change.zf.tabs', function() {
$('.slider').slick("setPosition", 0);
$('.slider').slick("slickGoTo", 0);
});
$('.slider').on('afterChange', function(event,slick,i){
$('.links li a').removeClass('slick-current');
$('.links li a').eq(i).addClass('slick-current');
});
// document ready
$('.links li a').eq(0).addClass('slick-current');
});
HTML
<div class="sidebar-nav">
<ul class="tabs vertical" id="example-vert-tabs" data-tabs>
<li class="tabs-title is-active"><a href="#panel1v" aria-selected="true">Tab 1</a></li>
<li class="tabs-title"><a href="#panel2v">Tab2</a></li>
</ul>
</div>
<div class="tabs-panel is-active" id="panel1v">
<div class="large-12 columns">
<div class="large-3 columns page-content-left">
<ul class="links">
<li><a href="#">slide1</a></li>
<li><a href="#">slide2</a></li>
<li><a href="#">slide3</a></li>
</ul>
</div>
<div id="" class="large-9 columns page-content-right">
<section class="slider" id="slider1">
<div class="slide">
</div>
<div class="slide">
</div>
<div class="slide">
</div>
</section>
</div>
</div>
</div>
<div class="tabs-panel" id="panel2v">
<div class="large-12 columns">
<div class="large-3 columns page-content-left">
<ul class="links">
<li><a href="#">slide1</a></li>
<li><a href="#">slide2</a></li>
<li><a href="#">slide3</a></li>
</ul>
</div>
<div id="" class="large-9 columns page-content-right">
<section class="slider" id="slider2">
<div class="slide">
</div>
<div class="slide">
</div>
<div class="slide">
</div>
</section>
</div>
</div>
</div>
完美工作,非常感谢您对我的帮助!你是一个传奇! –
@BenjiBaird太棒了!很高兴我能帮助你 – arcs