Slick slider - Adding active class to first < a > in currently open foundation tab

问题

Trying to add an active class to the first a tag within a selected tab.

My code is adding the active class to the very first element in slide one and doing exactly what I want within slider one but then when I change tabs it is still adding the active class to the navigation on the first slider not slider 2 that is in view.

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>

回答1:

Your problem is that the listeners are set for both sliders. You have to create each slider individually. I'd say the simplest solution is to create a jQuery function that handles all that.

So with your HTML, the code necessary would about look like so (it's not perfectly optimized but easy to read)

// 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()

回答2:

You can try using on function in id rather than class and remove and add class referring from parent element i.e. panel2v or panel1v. and dont forget to use on function for both slider. Hope it works.

回答3:

Slick can't handle multiple sliders being instantiated together. You need to instantiate the sliders individually using 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
});

You should still be able to hook in your events to both at once using the classes though.

来源：https://stackoverflow.com/questions/45695455/slick-slider-adding-active-class-to-first-a-in-currently-open-foundation-t