滑动滑块 - 向当前打开的基础选项卡中的第一个< a >添加活动类

Question

试图将活动类添加到选定选项卡中的第一个标记。

我的代码被添加活性类的第一个元素的幻灯片中，准确地做我想要的滑块一个内，但后来当我更改选项卡它仍然是添加活性类导航第一滑不滑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> 

Answer 1

你的问题是这两个滑块都设置了监听器。您必须单独创建每个滑块。我会说最简单的解决方案是创建一个处理所有这些jQuery函数。

与HTML

因此，所需的代码将大约看起来像这样（它不是完美的优化，但便于阅读）

// create a new jQuery function 
$.fn.extend({ 
    createTabSlider: function() { 
    var $self = $(this) 

    // $self is the tab, to get an element you DONT use $('something') 
    // you use $self.find("something") 

    var $slideshow = $self.find(".slider").slick({ 
     dots: false, 
     infinite: true, 
     speed: 300, 
     slidesToShow: 1, 
     adaptiveHeight: true, 
     swipeToSlide: true, 
     touchThreshold: 3, 
     arrows: false 
    }) 

    $self.find(".links").on("click", "a", function(e) { 
     var slideIndex = $(this).closest("li").index() 
     $slideshow.slick("slickGoTo", slideIndex) 
    }) 

    $slideshow.on("afterChange", function(event, slick, i) { 
     $self.find(".links li a").removeClass("slick-current") 
     $self.find(".links li a").eq(i).addClass("slick-current") 
    }) 

    $self.find(".links li a").eq(0).addClass("slick-current") 

    } 
}) 

// create a slider for each tab 
$("#panel1v").createTabSlider() 
$("#panel2v").createTabSlider() 

Answer 2

您可以尝试在ID而不是阶级使用的功能及删除和添加类从父元素即panel2v或panel1v参考。并且不要忘记在两个滑块上使用函数。希望它有效。

Answer 3

油滑无法处理一起实例化的多个滑块。您需要使用ID分别实例化滑块。

var $slideshow1 = $("#slider1").slick({ 
    dots: false, 
    infinite: true, 
    speed: 300, 
    slidesToShow: 1, 
    adaptiveHeight: true, 
    swipeToSlide: true, 
    touchThreshold: 3, 
    arrows: false 
}); 

var $slideshow2 = $("#slider2").slick({ 
    dots: false, 
    infinite: true, 
    speed: 300, 
    slidesToShow: 1, 
    adaptiveHeight: true, 
    swipeToSlide: true, 
    touchThreshold: 3, 
    arrows: false 
}); 

你应该仍然可以使用这些类一次钩入你的事件。