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

如何解决导航滑块上的光滑滑块变换问题

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

在下面的示例中，如果您进入全屏模式，点击第二张幻灯片，然后调整浏览器大小，导航滑块中的第一个项目就会消失，因为 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,slidesToShow: 5,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,});

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

@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>

解决方法

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

解决方案（更像是一种黑客攻击）是在 transform: translate3d(0,0); 上强制 .slick-track：

$(".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,slidesToShow: 5,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)!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>