Question

尝试将活动类添加到选定选项卡中的第一个标记。

我的代码是将活动类添加到第一张幻灯片中的第一个元素，并在滑块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而不是class中使用on函数，并从父元素（即panel2v或panel1v）中删除并添加类引用。并且不要忘记使用两个滑块的功能。希望它有效。

Answer 3

Slick无法处理多个同时实例化的滑块。您需要使用ID单独实例化滑块。

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

您仍然可以使用这些类同时将事件挂钩到两者。

滑动滑块 - 将活动类添加到第一个＆lt; a＆gt;在当前开放的基础选项卡中

3 个答案: