光滑的滑块 \- css 过渡无限循环错误

Question

我有一个使用光滑滑块设置的滑块。当使用下一个和上一个按钮时，该项目以一个很好的过渡进入查看。我遇到的问题是，当它重新启动循环时，第一项“捕捉”到视图中，而不是进行转换。此外，随着css“奇数”和“偶数”类的变化，它似乎失去了内部索引。请参见下面的片段：

 $(document).ready(function() {
    $('.items').slick({
        slidesToShow: 2,
        speed: 500
    });
});

 * {
  margin: 0;
  padding: 0;
}

ul {
  list-style: none;
  height: 150px;
}

.slick-list, .slick-track {
  height: 100%;
}

ul li {
  width: 350px;
  height: 100%;
}

ul li .content {
  width: 100%;
  height: 100%;
  transition: transform 0.5s linear;
  text-align: center;
}

ul li .content span {
  color: #fff;
  font-size: 50px;
  font-family: Arial;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  display: block;
}

ul li:nth-child(odd) .content {
  background-color: red;
}

ul li:nth-child(even) .content {
  background-color: green;
}

ul li:not(.slick-current) .content {
  transform: scale(0.9);
}

 <link href="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script>
<ul class="items">
  <li class="item">
    <div class="content">
      <span>1</span>
    </div>
  </li>

  <li class="item">
    <div class="content">
      <span>2</span>
    </div>
  </li>

  <li class="item">
    <div class="content">
      <span>3</span>
    </div>
  </li>

  <li class="item">
    <div class="content">
      <span>4</span>
    </div>
  </li>

  <li class="item">
    <div class="content">
      <span>5</span>
    </div>
  </li>
</ul>

我想我知道它为什么这样做，因为它必须创建“克隆”项目才能使无限循环功能起作用。我尝试了一些不同的滑块插件，它们似乎都有类似的问题。

有谁知道我该如何解决这个问题？ jsfiddle在这里： https ://jsfiddle.net/7kdmwkd9/1/

原文由 MAX POWER 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

解决方案 1 - 使用 Flickity

如果您想尝试其他轮播控件，可以查看 Flickity 。根据我对 wrapAround 选项的测试，当整个循环完成时，它不会将第一个项目“弹回”到位；过渡顺利进行。你可以在 这个 jsfiddle 中看到它。

至于根据偶数/奇数索引格式化项目的问题，只有当你有奇数个项目时才会发生。一种解决方案是复制项目列表。而不是

Item 1 / Item 2 / Item 3 / Item 4 / Item 5

你可以定义

Item 1 / Item 2 / Item 3 / Item 4 / Item 5 / Item 1 / Item 2 / Item 3 / Item 4 / Item 5

这将确保您使用偶数个项目。

---

解决方案 2 - Slick Slider：添加过渡延迟

使用 Slick Slider，为过渡添加延迟有助于在循环完成时使其更平滑。在下面的代码片段中，我替换了：

 ul li .content {
  transition: transform 0.5s linear;
  ...
}

ul li:not(.slick-current) .content {
  transform: scale(0.9);
}

和

ul li .content {
  transition: transform 0.3s linear;
  transition-delay: 0.5s;
  ...
}

ul li:not(.slick-current) .content {
  transform: scale(0.9);
  transition-delay: 0s;
}

 $(document).ready(function() {
  $('.items').slick({
    infinite: true,
    speed: 500,
    slidesToShow: 2,
    variableWidth: false
  });
});

 * {
  margin: 0;
  padding: 0;
}

ul {
  list-style: none;
  height: 150px;
}

.slick-list,
.slick-track {
  height: 100%;
}

ul li {
  width: 350px;
  height: 100%;
}

ul li .content {
  width: 100%;
  height: 100%;
  transition: transform 0.3s linear;
  transition-delay: 0.5s;
  text-align: center;
}

ul li .content span {
  color: #fff;
  font-size: 50px;
  font-family: Arial;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  display: block;
}

ul li:nth-child(odd) .content {
  background-color: red;
}

ul li:nth-child(even) .content {
  background-color: green;
}

ul li:not(.slick-current) .content {
  transform: scale(0.9);
  transition-delay: 0s;
}

 <link href="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script>
<ul class="items">
  <li class="item">
    <div class="content">
      <span>1</span>
    </div>
  </li>
  <li class="item">
    <div class="content">
      <span>2</span>
    </div>
  </li>
  <li class="item">
    <div class="content">
      <span>3</span>
    </div>
  </li>
  <li class="item">
    <div class="content">
      <span>4</span>
    </div>
  </li>
  <li class="item">
    <div class="content">
      <span>5</span>
    </div>
  </li>
  <li class="item">
    <div class="content">
      <span>1</span>
    </div>
  </li>
  <li class="item">
    <div class="content">
      <span>2</span>
    </div>
  </li>
  <li class="item">
    <div class="content">
      <span>3</span>
    </div>
  </li>
  <li class="item">
    <div class="content">
      <span>4</span>
    </div>
  </li>
  <li class="item">
    <div class="content">
      <span>5</span>
    </div>
  </li>
</ul>

原文由 ConnorsFan 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

由于我无法摆脱过去，我仍在使用 Slick。我遇到了这个问题，结果发现问题是我的滑块图像使用了 srcset 属性。删除解决了这个问题。

原文由 Gavin 发布，翻译遵循 CC BY-SA 4.0 许可协议