带有用于导航的堆叠滑块的 JS 滑块

Question

我正在寻找一个滑块，它可以自动循环浏览各个幻灯片，但也有一个堆叠的导航，还有一个滑块。 像这样：

我遇到的主要问题是该同步滑块仅显示 1 个“活动”幻灯片，并且导航被堆叠，并且在它自己的滑块中。当它自动播放到“7”时，底部的滑块应该滑过以显示一个处于活动状态。 这是我能破解的最接近的方法：

我的代码：

$('.slider-for').slick({
  autoplay: true,
  autoplaySpeed: 1000,
  speed: 700,
  mobileFirst: true,
  slidesToScroll: 1,
  slidesToShow: 1,
  rows: 1,
  fade: true,
  swipeToSlide: true,
  infinite: false,
  focusOnSelect: true,
  pauseOnHover: false,
  arrows: false,
  dots: false,
  asNavFor: '.slider-nav'
});

$('.slider-nav').slick({
  autoplay: false,
  autoplaySpeed: 9000,
  speed: 700,
  mobileFirst: true,
  slidesToScroll: 1,
  slidesToShow: 2,
  rows: 3,
  swipeToSlide: true,
  infinite: false,
  focusOnSelect: true,
  pauseOnHover: false,
  arrows: true,
  dots: true,
  asNavFor: '.slider-for'
});

$('.slick').slick();

var $parent = $(".slider-for");
var $nav = $(".slider-nav");
var $content = $nav.find("div");
var killit = false;

$content.on("click", function(e) {
  if (!killit) {
    e.stopPropagation();
    var idx = $(this).data("thumb");
    $parent.slick("goTo", idx - 1);
  }
});

$nav.on("beforeChange", function() {
  killit = true;
}).on("afterChange", function() {
  killit = false;
});

body {
  background: gray;
}

.slider {
  font-family: Arial;
  width: 500px;
  display: block;
  margin: 0 auto;
}

.slider h3 {
  background: #fff;
  color: #3498db;
  font-size: 36px;
  line-height: 100px;
  margin: 10px;
  padding: 2%;
  position: relative;
  text-align: center;
}

.slider .action {
  display: block;
  margin: 100px auto;
  width: 100%;
  text-align: center;
}

.slider .action a {
  display: inline-block;
  padding: 5px 10px;
  background: #f30;
  color: #fff;
  text-decoration: none;
}

.slider .action a:hover {
  background: #000;
}

.slick-active {
  border: 1px solid red
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://kenwheeler.github.io/slick/slick/slick.js"></script>

<link rel="stylesheet" type="text/css" href="https://kenwheeler.github.io/slick/slick/slick.css"/>

<link rel="stylesheet" type="text/css" href="https://kenwheeler.github.io/slick/slick/slick-theme.css"/>

<div class="slider">
  <div class="slider-for">
    <div>
      <h3>1</h3>
    </div>
    <div>
      <h3>2</h3>
    </div>
    <div>
      <h3>3</h3>
    </div>
    <div>
      <h3>4</h3>
    </div>
    <div>
      <h3>5</h3>
    </div>
    <div>
      <h3>6</h3>
    </div>
    <div>
      <h3>7</h3>
    </div>
    <div>
      <h3>8</h3>
    </div>
    <div>
      <h3>9</h3>
    </div>
    <div>
      <h3>10</h3>
    </div>
    <div>
      <h3>11</h3>
    </div>
    <div>
      <h3>12</h3>
    </div>
  </div>
  <div class="slider-nav">
    <div data-thumb="1">
      <h3>1</h3>
    </div>
    <div data-thumb="2">
      <h3>2</h3>
    </div>
    <div data-thumb="3">
      <h3>3</h3>
    </div>
    <div data-thumb="4">
      <h3>4</h3>
    </div>
    <div data-thumb="5">
      <h3>5</h3>
    </div>
    <div data-thumb="6">
      <h3>6</h3>
    </div>
    <div data-thumb="7">
      <h3>7</h3>
    </div>
    <div data-thumb="8">
      <h3>8</h3>
    </div>
    <div data-thumb="9">
      <h3>9</h3>
    </div>
    <div data-thumb="10">
      <h3>10</h3>
    </div>
    <div data-thumb="11">
      <h3>11</h3>
    </div>
    <div data-thumb="12">
      <h3>12</h3>
    </div>
  </div>
</div>

View on jsFiddle

Answer 1

如果两个滑块都具有相同的row 属性，asNavFor 属性将完美运行。但是因为您希望第二个滑块有三行，所以您必须使用自己的同步功能。

---

首先你必须准备.slider-for 的孩子：给他们data-thumb 属性，就像.slider-nav 的孩子一样。

之后，您可以使用data-thumb 属性获取.slider-for 显示幻灯片的索引

let for_index = $(this).find('.slick-current')[0].dataset.thumb;

并用它计算.slider-nav 的幻灯片索引。在这里，您必须从for_index 中减去1，因为它以1 而不是0 开头（就像索引一样）。

let nav_index = Math.floor((for_index - 1) / 3);

那么你goTo那个索引。

$('.slider-nav').slick('goTo', nav_index);

要使其工作，您必须将所有内容封装在事件侦听器（及其处理程序）中。我为此使用了setPosition 事件，因为它在初始化时设置了当前幻灯片的样式。

---

工作示例：（为演示而简化）

我将红色边框更改为更亮的背景，因为边框弄乱了滑块，即使使用 box-sizing: border-box（最后一张幻灯片已移至第二个隐藏行，因此不可见）。

我还删除了 .slider-nav 的 autoplaySpeed 和 speed，因为 autoplay 和 fade 设置为 false。

$('.slider-for').slick({
  autoplay: true,
  autoplaySpeed: 1000,
  mobileFirst: true,
  slidesToScroll: 1,
  slidesToShow: 1,
  rows: 1,
  fade: true,
  speed: 700,
  swipeToSlide: true,
  infinite: false,
  focusOnSelect: true,
  pauseOnHover: false,
  arrows: false,
  dots: false
});

$('.slider-nav').slick({
  autoplay: false,
  mobileFirst: true,
  slidesToScroll: 1,
  slidesToShow: 2,
  rows: 3,
  swipeToSlide: true,
  infinite: false,
  focusOnSelect: true,
  pauseOnHover: false,
  arrows: true,
  dots: true
});

$('.slider-for').on('setPosition', function() {
  let for_index = $(this).find('.slick-current')[0].dataset.thumb;
  let nav_index = Math.floor((for_index - 1) / 3);
  
  $('.slider-nav').slick('goTo', nav_index);
  $('.slider-nav .slick-slide').css('background-color', 'transparent');
  $('.slider-nav .slick-slide[data-slick-index="' + nav_index + '"]').css('background-color', '#aaa');
});

body {
  background: gray;
}

.slider {
  font-family: Arial;
  width: 500px;
  display: block;
  margin: 0 auto;
}

.slider h3 {
  background: #fff;
  color: #3498db;
  font-size: 36px;
  line-height: 100px;
  margin: 10px;
  padding: 2%;
  text-align: center;
  transition-delay: 0s;
}

.slider .slick-dots li button::before {
  font-size: 15px;
  color: white;
}

.slider .slick-dots li.slick-active button::before {
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://kenwheeler.github.io/slick/slick/slick.js"></script>

<link rel="stylesheet" type="text/css" href="https://kenwheeler.github.io/slick/slick/slick.css"/>

<link rel="stylesheet" type="text/css" href="https://kenwheeler.github.io/slick/slick/slick-theme.css"/>

<div class="slider">

  <div class="slider-for">
    <div data-thumb="1">
      <h3>1</h3>
    </div>
    <div data-thumb="2">
      <h3>2</h3>
    </div>
    <div data-thumb="3">
      <h3>3</h3>
    </div>
    <div data-thumb="4">
      <h3>4</h3>
    </div>
    <div data-thumb="5">
      <h3>5</h3>
    </div>
    <div data-thumb="6">
      <h3>6</h3>
    </div>
    <div data-thumb="7">
      <h3>7</h3>
    </div>
    <div data-thumb="8">
      <h3>8</h3>
    </div>
    <div data-thumb="9">
      <h3>9</h3>
    </div>
    <div data-thumb="10">
      <h3>10</h3>
    </div>
    <div data-thumb="11">
      <h3>11</h3>
    </div>
    <div data-thumb="12">
      <h3>12</h3>
    </div>
  </div>

  <div class="slider-nav">
    <div data-thumb="1">
      <h3>1</h3>
    </div>
    <div data-thumb="2">
      <h3>2</h3>
    </div>
    <div data-thumb="3">
      <h3>3</h3>
    </div>
    <div data-thumb="4">
      <h3>4</h3>
    </div>
    <div data-thumb="5">
      <h3>5</h3>
    </div>
    <div data-thumb="6">
      <h3>6</h3>
    </div>
    <div data-thumb="7">
      <h3>7</h3>
    </div>
    <div data-thumb="8">
      <h3>8</h3>
    </div>
    <div data-thumb="9">
      <h3>9</h3>
    </div>
    <div data-thumb="10">
      <h3>10</h3>
    </div>
    <div data-thumb="11">
      <h3>11</h3>
    </div>
    <div data-thumb="12">
      <h3>12</h3>
    </div>

</div>