Slick slider - 添加 active class 到当前打开的基础选项卡中的第一个 <a>

Question

正在尝试将活动 class 添加到所选选项卡中的第一个标签。

我的代码正在将活动 class 添加到第一张幻灯片中的第一个元素，并在第一张幻灯片中完全按照我的意愿进行操作，但是当我更改选项卡时，它仍在添加活动 class到第一个滑块上的导航，而不是视图中的滑块 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

您可以尝试在 id 中使用 on 函数而不是 class，并删除和添加从父元素（即 panel2v 或 panel1v）引用的 class。并且不要忘记对两个滑块使用 on 函数。希望有用。

Answer 2

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

尽管如此，您仍然应该能够使用类将您的事件同时挂接到两者。

Answer 3

您的问题是为两个滑块都设置了侦听器。您必须单独创建每个滑块。我想说最简单的解决方案是创建一个 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()

Slick slider - 添加 active class 到当前打开的基础选项卡中的第一个 <a>

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

html

javascript

jquery

zurb-foundation

slick.js