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 with

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

Solution 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.

Solution 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.