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

如何解决带有用于导航的堆叠滑块的 JS 滑块

我希望构建一个可以在单个幻灯片之间自动循环的滑块，但也有一个堆叠的导航和一个滑块。 像这样：

我遇到的主要问题是同步滑块只显示 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,slidesToShow: 2,rows: 3,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

解决方法

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

---

首先，您必须准备 .slider-for 的孩子：为他们提供 data-thumb 属性，就像 .slider-nav 的孩子所拥有的一样。

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

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

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

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

然后你goTo那个索引。

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

要使其工作，您必须将所有这些都包装在一个事件侦听器（及其处理程序）中。我为此使用了 setPosition 事件，因为它在 init 上设置了当前幻灯片的样式。

---

工作示例：（简化演示）

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

我还删除了 autoplaySpeed 的 speed 和 .slider-nav，因为 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,slidesToShow: 2,rows: 3,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>