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

我有一个滑块设置使用光滑滑块。当使用“下一步”和“上一步”按钮时，项目将以良好的过渡进入视图。我遇到的问题是，当它重新开始它的循环时，第一个项目“捕捉”到视图中，而不是进行转换。此外，随着css“奇”和“偶”类的更改，它似乎失去了内部索引。请参阅下面的代码片段：

$（文档）.ready（函数（）{
$（'.items'）.slick({
幻灯片放映：2，
速度：500
});
});
*{
保证金：0；
填充：0；
}
保险商实验室{
列表样式：无；
高度：150像素；
}
.光滑列表，.光滑轨道{
身高：100%；
}
ulli{
宽度：350px；
身高：100%；
}
ulli.内容{
宽度：100%；
身高：100%；
过渡：0.5s线性变换；
文本对齐：居中；
}
内容跨度{
颜色：#fff；
字体大小：50px；
字体系列：Arial；
位置：相对位置；
最高：50%；
转化：translateY（-50%）；
显示：块；
}
第n个孩子（单数）。内容{
背景色：红色；
}
第n个孩子（偶数）。内容{
背景颜色：绿色；
}
ul li：不是（.slick current）。内容{
变换：比例（0.9）；
}



1.


2.


3.


4.


5.

这不是一个问题，这是一个功能-这就是slick滑块（以及大多数其他无限循环滑块）的工作原理。基本上，若slider只克隆div，那个么它将导致一个巨大的性能问题，所以在某些地方（开始/结束），在动画之后，它会重新开始整个过程

如果您感兴趣，这里有一个基于转换的滑块概念证明，它不克隆任何东西，只需更改位置即可。同样，也有可能通过
订单
实现同样的效果-我没有尝试过，但现在已经考虑过了

-当然，要使其完全可用需要大量的工作，但我尝试使其响应速度更快，并且与您的示例最为相似。您只需跟踪索引即可添加/删除某些类（例如，
.current
）
解决方案1-使用Flickity

如果您想尝试其他旋转木马控件，可以查看。根据我对环绕选项的测试，当整个循环完成时，它不会将第一个项目“捕捉”回原位；过渡进展顺利。你可以在工作中看到它

至于根据项目的偶数/奇数索引格式化项目的问题，只有当项目数为奇数时才会发生。一种解决办法是复制项目清单。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，为过渡添加延迟有助于在循环完成时使其更加平滑。在下面的代码段中，我替换了：

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

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

与


$（文档）.ready（函数（）{
$（'.items'）.slick({
无限：是的，
速度:500,，
幻灯片放映：2，
可变宽度：false
});
});
*{
保证金：0；
填充：0；
}
保险商实验室{
列表样式：无；
高度：150像素；
}
.花里胡哨的名单，
.光滑的轨道{
身高：100%；
}
ulli{
宽度：350px；
身高：100%；
}
ulli.内容{
宽度：100%；
身高：100%；
过渡：0.3s线性变换；
过渡延迟：0.5s；
文本对齐：居中；
}
内容跨度{
颜色：#fff；
字体大小：50px；
字体系列：Arial；
位置：相对位置；
最高：50%；
转化：translateY（-50%）；
显示：块；
}
第n个孩子（单数）。内容{
背景色：红色；
}
第n个孩子（偶数）。内容{
背景颜色：绿色；
}
ul li：不是（.slick current）。内容{
变换：比例（0.9）；
转换延迟：0s；
}



1.


2.


3.


4.


5.


1.


2.


3.


4.


5.

@GSTAR，最终您的代码中没有错误，但在使用slick时，您需要了解一些css和js流

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

在顺利实施之前先编写代码

因此，在循环完成并到达执行的第一个幻灯片动画之后，在到达之前，完成循环

请检查下面我的代码片段


$（文档）.ready（函数（）{
$（'.items'）.slick({
幻灯片放映：2，
速度：500
});
});
*{
保证金：0；
填充：0；
}
保险商实验室{
列表样式：无；
高度：150像素；
}
.光滑列表，.光滑轨道{
身高：100%；
}
ulli{
宽度：350px；
身高：100%；
}
ulli.内容{
宽度：100%；
身高：100%；
过渡：0.5s线性变换；
过渡延迟：0.5s；
文本对齐：居中；
}
内容跨度{
颜色：#fff；
字体大小：50px；
字体系列：Arial；
位置：相对位置；
最高：50%；
转化：translateY（-50%）；
显示：块；
}
第n个孩子（单数）。内容{
背景色：红色；
}
第n个孩子（偶数）。内容{
背景颜色：绿色；
}
ul li：不是（.slick current）。内容{
变换：比例（0.9）；
}



1.


2.


3.


4.


5.

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;
}

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

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

 Slick.prototype.setSlideClasses = function(index) 

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

_.$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');
    }
}

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

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

/* 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"] {

}

.slick-track {
transition: fade 2000ms ease-out;  
infinite: true;  
}