Slickスライダー - 現在開かれている基盤タブの最初に< a >にアクティブなクラスを追加する

Question

選択したタブ内の最初のタグにアクティブなクラスを追加しようとしています。

私のコードでは、スライド1の最初の要素にアクティブなクラスを追加していますが、スライダ1内のものとまったく同じですが、タブを変更するとアクティブなクラスが最初のスライダ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

Slickは複数のスライダを一緒にインスタンス化することはできません。 idsを使用して個々にスライダをインスタンス化する必要があります。

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 
}); 

イベントを両方のクラスに同時にフックすることは可能です。