javascript - Slick slider - 在当前打开的基础选项卡中将事件类添加到第一个 <a>

Question

尝试将事件类添加到所选选项卡中的第一个标签。

我的代码是将事件类添加到幻灯片 1 中的第一个元素，并在 slider 1 中执行我想要的操作，但是当我更改选项卡时，它仍然将事件类添加到第一个 slider 而不是 slider 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

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