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

q5iwbnjs  于 2023-05-06  发布在  jQuery
关注(0)|答案(9)|浏览(113)

我用滑球设置了一个滑球。当使用下一个和上一个按钮时，项目会以一个漂亮的过渡进入视图。我遇到的问题是，当它重新开始循环时，第一个项目“卡”入视图，而不是进行转换。此外，它似乎失去了它的内部索引，因为css的“odd”和“even”类被改变了。参见下面的片段：

$(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/

jquery

9条答案

按热度按时间
lp0sw83n

lp0sw83n1#

方案1 -使用Flickity

如果你想尝试另一个carousel控件，你可以看看Flickity。根据我对wrapAround选项的测试，当整个循环完成时，它不会将第一个项目“卡扣”回位置;过渡顺利进行。你可以在this 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，向过渡添加延迟有助于在循环完成时使过渡更平滑。在下面的代码片段中，我替换了：

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>
赞(0）分享  回复(0）举报  2023-05-06
czfnxgou

czfnxgou2#

@GSTAR，最终你的代码中没有错误，但是在使用slick时，你需要了解一些css和js流。
Slick是克隆您的幻灯片，并在幻灯片的顶部和底部进行修改。如下所述。

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>

因此，在循环完成并到达执行的第一个幻灯片动画之后，在到达之前完成。
请检查下面的片段。

$(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;
  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);
}
<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>

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

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

赞(0）分享  回复(0）举报  2023-05-06
k5ifujac

k5ifujac3#

这不是一个问题，这是一个功能--这就是slick slider（以及大多数其他无限循环滑块）的工作方式。基本上，如果滑块只克隆div，它将以一个巨大的性能问题结束，因此在动画之后的某些地方（开始/结束），它会重新渲染整个事情重新开始。
如果你有兴趣，这里是一个概念验证的滑块，是基于过渡，不克隆任何东西，只是改变位置。也许也有可能实现同样的order-还没有尝试，但现在考虑它。
https://codepen.io/prowseed/pen/QMEQxg-当然，要使其完全可用需要做很多工作，但我试图使其响应性和最类似于您的示例。你只需要跟踪索引来添加/删除某些类（例如.current）。

赞(0）分享  回复(0）举报  2023-05-06
dsf9zpds

dsf9zpds4#

这里是我对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)find函数Slick.prototype.slideHandler在其body replace调用中

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

到

oldSlide = _.currentSlide;
_.currentSlide = animSlide;
_.setSlideClasses(_.currentSlide,oldSlide);
赞(0）分享  回复(0）举报  2023-05-06
9nvpjoqh

9nvpjoqh5#

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

}
赞(0）分享  回复(0）举报  2023-05-06
qnzebej0

qnzebej06#

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

赞(0）分享  回复(0）举报  2023-05-06
rbpvctlc

rbpvctlc7#

因为我很难放下过去，所以我仍然在使用Slick。我遇到了这个问题，原来问题是我的滑块图像使用了srcset属性。删除已解决问题的文件。

赞(0）分享  回复(0）举报  2023-05-06
3phpmpom

3phpmpom8#

在“.slick-center”类而不是“.slick-active”类上应用过渡为我解决了这个问题

.slick-slide {
  transform: scale(0.85);
  pointer-events: none;
  transition: transform 0.6s linear;
}

.slick-center {
  transform: scale(1);
  pointer-events: all;
赞(0）分享  回复(0）举报  2023-05-06
vc6uscn9

vc6uscn99#

我找到了一个非常简单的解决方案，我的版本的问题，这是一旦所有4张幻灯片已经完成，它将循环回轮积极/错误。
我发现添加以下内容提供了一个没有故障的无限循环

.slick-track {
transition: fade 2000ms ease-out;  
infinite: true;  
}
赞(0）分享  回复(0）举报  2023-05-06
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备13028337号-1 大数据知识库 https://www.saoniuhuo.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com