光滑的滑块 - css过渡无限循环bug

时间：2017-07-30 23:43:01

标签： jquery css slick-slider

我使用光滑的滑块设置了一个滑块。使用下一个和上一个按钮时，该项目会以一个很好的过渡进入查看。我遇到的问题是当它重新开始循环时，第一项＆＃34;快照＆＃34;进入视野，而不是进行过渡。此外，似乎它失去了它的内部索引，因为css＆＃34; odd＆＃34;和＆＃34;甚至＆＃34;课程改变了。请参阅以下代码段：

＆＃13;
＆＃13; 
$(document).ready(function() {
    $('.items').slick({
        slidesToShow: 2,
        speed: 500
    });
});
＆＃13; 
* {
  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);
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

我想我知道为什么要这样做，因为它必须创造＆＃34;克隆＆＃34;无限循环功能的项目。我尝试了一些不同的滑块插件，它们似乎都有类似的问题。

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

7 个答案:

答案 0 :(得分：11)

解决方案1 ​​ - 使用Flickity

如果您想尝试其他轮播控件，可以查看Flickity。根据我使用wrapAround选项的测试，当完整循环完成时，它不会将第一个项目“捕捉”回位置;过渡进展顺利。您可以在this jsfiddle中看到它。

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

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>

答案 1 :(得分：5)

@GSTAR，最终你的代码中没有错误，但是在使用光滑时你需要了解css和js流。

Slick正在克隆幻灯片并修改幻灯片的顶部和底部。如下所述。

  在光滑实施之前

您的代码 

<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>6</span></div></li>
</ul>
  

光滑实施后的代码 

<ul class="items">
    <li class="item slick-cloned"><div class="content"><span>4</span></div></li>
    <li class="item slick-cloned"><div class="content"><span>5</span></div></li>
    <li class="item slick-cloned"><div class="content"><span>6</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>
    <li class="item"><div class="content"><span>6</span></div></li>

    <li class="item slick-cloned"><div class="content"><span>1</span></div></li>
    <li class="item slick-cloned"><div class="content"><span>2</span></div></li>
    <li class="item slick-cloned"><div class="content"><span>3</span></div></li>
</ul>

在添加此内容之后，您的animation代码工作正常。但它无法在视觉上看到。如果您增加animation时间而不是快照您的浏览器。

如果你替换了javascript代码，那么你就会知道发生了什么。

<script type="text/javascript">
    $(document).ready(function() {
        $('.items').slick({
            centerMode:true,
            slidesToShow: 3,
            speed: 500,
            infinite: true,
            cssEase: 'linear',
            variableWidth: true
        });
    });
</script>

所以在循环完成并到达第一个幻灯片动画时，在达到它之前就完成了。

请在我的代码段下方查看。

＆＃13;
＆＃13; 
$(document).ready(function() {
    $('.items').slick({
        slidesToShow: 2,
        speed: 500
    });
});
＆＃13; 
* {
  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;
  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);
}
＆＃13; 
<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>6</span>
    </div>
  </li>
</ul>
＆＃13;
＆＃13;
＆＃13;

在无限循环中，您有用户odd和even css，因此根据循环，您的下一张first幻灯片（克隆幻灯片）颜色为绿色，但原始幻灯片（第一张幻灯片）有红色，因此它也有轻弹的颜色。如果您使用%2中的幻灯片数量，则不会发生这种情况。

enter image description here

希望它能帮助你更好地理解。

答案 2 :(得分：3)

这不是一个问题，它是一个功能 - 这就是滑块（以及大多数其他无限循环滑块）的工作原理。基本上，如果滑块只能克隆div，那么最终会出现巨大的性能问题，因此在动画之后的某些地方（开始/结束）它会重新渲染整个东西。

如果您对此感兴趣，那么滑块的概念验证基于转换并且不会克隆任何内容，只需更改位置即可。也许有可能实现同样的order - 尝试过但现在想一想。

https://codepen.io/prowseed/pen/QMEQxg - 当然需要做很多工作才能使其完全可用，但我尝试使其响应并且与您的示例最相似。您只需跟踪索引即可添加/删除某些类（例如.current）。

答案 3 :(得分：2)

这是我对slick.js的破解 警告!!仔细使用它，导致其改变插件的源代码

1）查找功能
的 Slick.prototype.setSlideClasses     并取代其定义     来自

 Slick.prototype.setSlideClasses = function(index)

到

Slick.prototype.setSlideClasses = function(index, oldSlide)

2）在代码

之后的函数体中 
_.$slides
    .eq(index)
    .addClass('slick-current');

添加

if(oldSlide!=undefined){
    if(index==0 && oldSlide!=1){
        var _current = this.$slides.eq(this.$slides.size()-1);
        var __index = allSlides.index(_current);
        var ss = allSlides.eq(__index+1);
        ss.addClass('slick-current');
    }
    if(index==this.$slides.size()-1 && oldSlide!=this.$slides.size()-2){
        var _current = this.$slides.eq(0);
        var __index = allSlides.index(_current);
        var ss = allSlides.eq(__index-1);
        ss.addClass('slick-current');
    }
}

3）找到函数 Slick.prototype.slideHandler 在它的身体替换呼叫

oldSlide = _.currentSlide;
_.currentSlide = animSlide;
_.setSlideClasses(_.currentSlide);

到

oldSlide = _.currentSlide;
_.currentSlide = animSlide;
_.setSlideClasses(_.currentSlide,oldSlide);

答案 4 :(得分：1)

Infinity设置为true，CenterMode设置为false 增加电流 只是css 

/* slide when not active*/ 
.slick-slide[aria-hidden="true"]:not(.slick-cloned) ~ .slick-cloned[aria-hidden="true"] {

}

/* slide when active (when play last to first) */ 
.slick-slide[aria-hidden="true"]:not([tabindex="-1"]) + .slick-cloned[aria-hidden="true"]  {

}
/* slide when active (when play first to last) */ 
.slick-slide[aria-hidden="true"] + .slick-cloned[aria-hidden="true"] {

}

答案 5 :(得分：0)

@Maciej Kwas

这可能是一个功能，但在这个网站上，当您使用“中心模式”查看滑块时，它工作正常，从最后一张幻灯片滑动到第一张幻灯片时动画看起来很正常。 http://kenwheeler.github.io/slick/

答案 6 :(得分：0)

对于我的问题版本，我找到了一个非常简单的解决方案，即一旦所有 4 张幻灯片都完成，它会积极地/错误地循环返回。

我发现添加以下内容提供了一个没有故障的无限循环

.slick-track {
transition: fade 2000ms ease-out;  
infinite: true;  
}
相关问题
最新问题