滑動滑塊 - 向當前打開的基礎選項卡中的第一個< 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 
}); 

你應該仍然可以使用這些類一次鉤入你的事件。