Slick.js 同步多个滑块导航

Question

我有一个活动网站，我想用滑块显示 12 个活动。我希望两个部分（演讲者和日程安排）充当显示单个事件内容的滑块，并使用滑块导航（带有箭头和数字）来控制它们。 使用 Slick.js，我可以通过单个滑块导航来实现这一点，但是当我复制滑块导航时 - 一个滑块导航无法正常工作（箭头有效，但数字无效）。 有没有办法在 Slick.js 中设置它来工作，或者如果没有人可以帮助我解决 JavaScript/jQuery 的问题？

Demo 可以在这里测试： demo

这是我的代码：

$('.slickSliderWrap').slick({
  slidesToShow: 1,
  slidesToScroll: 1,
  arrows: false,
  adaptiveHeight: true,
  asNavFor: '.day-wrap'
});
$('.day-wrap').slick({
  slidesToShow: 3,
  slidesToScroll: 1,
  asNavFor: '.slickSliderWrap',
  centerMode: true,
  centerPadding: '10px',
  prevArrow: '.dayArrow--left',
  nextArrow: '.dayArrow--right',
  focusOnSelect: false
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="speakers">
  <div class="agenda-wrap">
    <div class="nav-wrap">
      <button class="dayArrow dayArrow--left">
      </button>
      <div class="day-nav">
        <div class="day-wrap slider-nav">
          <button class="btn-day active">E01</button>
          <button class="btn-day">E02</button>
          <button class="btn-day">E03</button>
          <button class="btn-day">E04</button>
          <button class="btn-day">E05</button>
          <button class="btn-day">E06</button>
          <button class="btn-day">E07</button>
          <button class="btn-day">E08</button>
          <button class="btn-day">E09</button>
          <button class="btn-day">E10</button>
          <button class="btn-day">E11</button>
          <button class="btn-day">E12</button>
        </div>
      </div>
      <button class="dayArrow dayArrow--right">
      </button>
    </div>
  </div>
  <div class="speaker-list-wrap slickSliderWrap">
  
    <!-- event 01 list -->
    <div class="speaker-list">
      <!-- speaker item -->
      <!-- speaker item -->
      ...
      <!-- speaker item -->
    </div>
    
    <!-- event 02 list -->
    <div class="speaker-list">
      <!-- speaker item -->
      <!-- speaker item -->
      ...
      <!-- speaker item -->
    </div>
    
    ...
    
    <!-- event 12 list -->
    <div class="speaker-list">
      <!-- speaker item -->
      <!-- speaker item -->
      ...
      <!-- speaker item -->
    </div>
    
  </div>
</div><!-- /speakers -->






<div id="schedule">
  <div class="agenda-wrap">
    <div class="nav-wrap">
      <button class="dayArrow dayArrow--left">
      </button>
      <div class="day-nav">
        <div class="day-wrap slider-nav">
          <button class="btn-day active">E01</button>
          <button class="btn-day">E02</button>
          <button class="btn-day">E03</button>
          <button class="btn-day">E04</button>
          <button class="btn-day">E05</button>
          <button class="btn-day">E06</button>
          <button class="btn-day">E07</button>
          <button class="btn-day">E08</button>
          <button class="btn-day">E09</button>
          <button class="btn-day">E10</button>
          <button class="btn-day">E11</button>
          <button class="btn-day">E12</button>
        </div>
      </div>
      <button class="dayArrow dayArrow--right">
      </button>
    </div>
  </div>
  
  <div class="agenda-content-window">
    <div class="agenda-content-wrap slickSliderWrap">
      
      <!-- event 01 list -->
      <div class="agenda">
        <!-- agenda item -->
        <!-- agenda item -->
        ...
        <!-- agenda item -->
      </div>
    
      <!-- event 02 list -->
      <div class="agenda">
        <!-- agenda item -->
        <!-- agenda item -->
        ...
        <!-- agenda item -->
      </div>
    
      ...
    
     <!-- event 12 list -->
      <div class="agenda">
        <!-- agenda item -->
        <!-- agenda item -->
        ...
        <!-- agenda item -->
      </div>
    
  </div>
</div><!-- /schedule -->

Answer 1

我玩了一下，想出了一个工作版本。我想对其进行精简以制作一个更简单的示例，因此它仅包含一组导航和扬声器。

$(function() {
  $('.day-wrap').slick({
    slidesToShow: 3,
    slidesToScroll: 1,
    centerPadding: '10px',
    centerMode: true,
    prevArrow: '.dayArrow--left',
    nextArrow: '.dayArrow--right',
    asNavFor: '.speaker-list-wrap'
  });
  $('.speaker-list-wrap').slick({
    slidesToShow: 1,
    arrows: false
  });

  // asNavFor works when scrolling
  // Add onclick to buttons to navigate speakers
  $('.btn-day').on('click', function() {
    $('.speaker-list-wrap').slick('slickGoTo', $(this).attr('data-slick-index'));
  });
});

#speakers,
.speaker-list,
.nav-wrap {
  width: 300px;
}

.day-wrap {
  width: 300px;
  overflow: hidden;
}

.speaker-list,
.speaker-list-wrap,
.speaker-list-item {
  width: 300px;
}

.speaker-list {
  margin-top: 30px;
  height: 40px;
  border: 1px solid gray;
}

.speaker-list-wrap {
  overflow: hidden;
}

.speaker-list-item {
  float: left;
}

.btn-day {
  width: 50px;
  height: 20px;
  float: left;
  border: 1px solid blue;
  margin: 0 5px;
  text-align: center;
}

.btn-day.slick-current {
  color: white;
  background-color: blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.0/slick.min.js"></script>
<html>

<head></head>

<body>
  <div id="speakers">
    <div class="agenda-wrap">
      <div class="nav-wrap">
        <button class="dayArrow dayArrow--left">&lt;</button>
        <div class="day-nav">
          <div class="day-wrap slider-nav">
            <div class="btn-day active">E01</div>
            <div class="btn-day">E02</div>
            <div class="btn-day">E03</div>
            <div class="btn-day">E04</div>
            <div class="btn-day">E12</div>
          </div>
        </div>
        <button class="dayArrow dayArrow--right">&gt;</button>
      </div>
    </div>

    <div class="speaker-list">
      <div class="speaker-list-wrap">
        <div class="speaker-list-item">Speaker 1</div>
        <div class="speaker-list-item">Speaker 2</div>
        <div class="speaker-list-item">Speaker 3</div>
        <div class="speaker-list-item">Speaker 4</div>
        <div class="speaker-list-item">Speaker 12</div>
      </div>
    </div>
  </div>
  <!-- /speakers -->
</body>

</html>