我已经使用光滑的滑块设置了滑块。使用下一个和上一个按钮时,该项目将以良好的过渡进入查看。我遇到的问题是,当它重新开始其循环时,第一个项目会“捕捉”到 View 中,而不是进行过渡。此外,随着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/
最佳答案
解决方案1-使用Flickity
如果您想尝试其他轮播控件,则可以查看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:添加过渡延迟
使用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>
关于jquery - 光滑的滑块-CSS过渡无限循环错误,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/45405783/