导航滑块上的光滑滑块转换问题

Question

我对光滑的滑块有一个奇怪的问题，如果我的导航中显示的项目少于幻灯片，并且我不在第一张幻灯片上，如果我随后调整屏幕大小，则活动幻灯片之前的所有幻灯片都会被隐藏屏幕。

在下面的示例中，如果您进入全屏模式，单击第二张幻灯片，然后调整浏览器大小，导航滑块中的第一项会消失，因为 slick 会将其移出视图。

有没有办法阻止这种情况？

$(".single-item").slick({
  arrows: true,
  dots: true,
  fade: true,
  infinite: false,
  slidesToShow: 1,
  slidesToScroll: 1,
  asNavFor: '.navigation-item',
});
$(".navigation-item").slick({
  centerMode: false,
  dots: false,
  focusOnSelect: true,
  infinite: false,
  slidesToShow: 5,
  slidesToScroll: 1,
  asNavFor: '.single-item',
});

@import url('https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css');
@import url('https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css');
.container {
  margin: 0 auto;
  padding: 40px;
  width: 80%;
  color: #333;
  background: #419be0;
}

.slick-slide {
  text-align: center;
  color: #419be0;
  background: white;
}

.slick-disabled {
  cursor: not-allowed;
}

.navigation-item {
  display: none;
}

.navigation-item .slick-track {
  min-width: 100%;
}

@media screen and (min-width: 796px) {
  .navigation-item {
    display: block;
  }
}

<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.1/slick.min.js"></script>
<div class='container'>
  <div class='single-item'>
    <div>
      <h3>1</h3>
    </div>
    <div>
      <h3>2</h3>
    </div>
  </div>
  <div class='navigation-item'>
    <div>
      <h3>1</h3>
    </div>
    <div>
      <h3>2</h3>
    </div>
  </div>
</div>

如果我要显示的幻灯片不止一张，它似乎不会移动到导航中的第一张幻灯片 - 例如，下面我有 6 张幻灯片，如果我选择 4 并调整大小，则 4 会停留在它所在的位置导航并且不会移动到开头：

$(".single-item").slick({
  arrows: true,
  dots: true,
  fade: true,
  infinite: false,
  slidesToShow: 1,
  slidesToScroll: 1,
  asNavFor: '.navigation-item',
});
$(".navigation-item").slick({
  centerMode: false,
  dots: false,
  focusOnSelect: true,
  infinite: false,
  slidesToShow: 5,
  slidesToScroll: 1,
  asNavFor: '.single-item',
});

@import url('https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css');
@import url('https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css');
.container {
  margin: 0 auto;
  padding: 40px;
  width: 80%;
  color: #333;
  background: #419be0;
}

.slick-slide {
  text-align: center;
  color: #419be0;
  background: white;
}

.slick-disabled {
  cursor: not-allowed;
}

.navigation-item {
  display: none;
}

.navigation-item .slick-track {
  min-width: 100%;
}

@media screen and (min-width: 796px) {
  .navigation-item {
    display: block;
  }
}

<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.1/slick.min.js"></script>
<div class='container'>
  <div class='single-item'>
    <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>
  <div class='navigation-item'>
    <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>
</div>

在早期版本的 slick 中也没有发生这种情况 - 例如，在下面使用 v 1.5.9 的代码中，它似乎工作正常（但我无法恢复到这个版本，因为我们正在使用新滑块中的一些功能旧版本中不存在）

$(".single-item").slick({
  arrows: true,
  dots: true,
  fade: true,
  infinite: false,
  slidesToShow: 1,
  slidesToScroll: 1,
  asNavFor: '.navigation-item',
});
$(".navigation-item").slick({
  centerMode: false,
  dots: false,
  focusOnSelect: true,
  infinite: false,
  slidesToShow: 5,
  slidesToScroll: 1,
  asNavFor: '.single-item',
});

@import url('https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick-theme.min.css');
@import url('https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.min.css');
.container {
  margin: 0 auto;
  padding: 40px;
  width: 80%;
  color: #333;
  background: #419be0;
}

.slick-slide {
  text-align: center;
  color: #419be0;
  background: white;
}

.slick-disabled {
  cursor: not-allowed;
}

.navigation-item {
  display: none;
}

.navigation-item .slick-track {
  min-width: 100%;
}

@media screen and (min-width: 796px) {
  .navigation-item {
    display: block;
  }
}

<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.5.9/slick.min.js"></script>
<div class='container'>
  <div class='single-item'>
    <div>
      <h3>1</h3>
    </div>
    <div>
      <h3>2</h3>
    </div>
  </div>
  <div class='navigation-item'>
    <div>
      <h3>1</h3>
    </div>
    <div>
      <h3>2</h3>
    </div>
  </div>
</div>

Answer 1

较新版本的 slick-carousel 将 transform: translate3d(-127px, 0px, 0px); 应用于 .slick-track 内的 .navigation-item，尽管尚不完全清楚为什么会这样做。

解决方案（更多的是 hack）是在 .slick-track 上强制 transform: translate3d(0, 0, 0);：

$(".single-item").slick({
  arrows: true,
  dots: true,
  fade: true,
  infinite: false,
  slidesToShow: 1,
  slidesToScroll: 1,
  asNavFor: '.navigation-item',
});
$(".navigation-item").slick({
  centerMode: false,
  dots: false,
  focusOnSelect: true,
  infinite: false,
  slidesToShow: 5,
  slidesToScroll: 1,
  asNavFor: '.single-item',
});

@import url('https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css');
@import url('https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css');
.container {
  margin: 0 auto;
  padding: 40px;
  width: 80%;
  color: #333;
  background: #419be0;
}

.slick-slide {
  text-align: center;
  color: #419be0;
  background: white;
}

.slick-disabled {
  cursor: not-allowed;
}

.navigation-item {
  display: none;
}

.navigation-item .slick-track {
  min-width: 100%;
  transform: translate3d(0, 0, 0)!important;
}

@media screen and (min-width: 796px) {
  .navigation-item {
    display: block;
  }
}

<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.1/slick.min.js"></script>
<div class='container'>
  <div class='single-item'>
    <div>
      <h3>1</h3>
    </div>
    <div>
      <h3>2</h3>
    </div>
  </div>
  <div class='navigation-item'>
    <div>
      <h3>1</h3>
    </div>
    <div>
      <h3>2</h3>
    </div>
  </div>
</div>