滑块跳过一个幻灯片,同时单击下一步/ prev
我有两个挑战来构建我自己的旋转木马。滑块跳过一个幻灯片,同时单击下一步/ prev
1当你点击下一个或上一个按钮(在我的情况下,它是黑匣子),它跳过一张幻灯片。
请检查此琴:https://fiddle.jshell.net/k1ea93xt/3/
简单地说,当您单击下一步或只上一个,它的作品不错,但是当你改变了主意,打在了对方一个时,会出现问题。
一般来说,我想我知道是什么原因。我添加类“走出去”到下一个滑块来启动动画
$('.nxt').addClass('out');
和“” - 颠倒动画以前滑块
$('.prv').addClass('in');
两个“中”和“out”留在当前滑块销毁translateX值。
2第二个问题是我通过改变类NXT,PRV和电流改变滑块(我的js技能是有限的)
$('.nxt').addClass('out');
$('.current').removeClass('out');
$('.prv').removeClass('out');
$('.t1').removeClass('current');
$('.t2').removeClass('nxt');
$('.t3').removeClass('prv');
$('.t1').addClass('prv');
$('.t2').addClass('current');
$('.t3').addClass('nxt');
$('.current').removeClass('t2');
$('.prv').removeClass('t1');
$('.nxt').removeClass('t3');
$('.current').addClass('t1');
$('.nxt').addClass('t2');
$('.prv').addClass('t3');
$('.t1').removeClass('in');
$('.t2').removeClass('in');
$('.t3').removeClass('in');
问题是我不能在传送带超过3张幻灯片。有没有简单的方法来自动分配类的当前,prv和nxt? Thx提前。
我更新了你的jQuery,并创建了一个函数来查找下一张和上一张幻灯片并添加了一些setTimeout()。这将允许您拥有尽可能多的幻灯片。
我也感动了滑盖的功能查找。主要滑块中的元素外滑块按钮
var interval = undefined;
$(document).ready(function() {
interval = setInterval(getNext, 1000); // milliseconds
$('.next').on('click', getNext);
$('.previous').on('click', getPrev);
});
//Get next slide
function getNext() {
var $curr = $('.main-slider .slide.current'),
$next = ($curr.next().length) ? $curr.next() : $('.main-slider .slide').first();
transitionOut($curr, $next);
}
// get previous
function getPrev() {
var $curr = $('.main-slider .slide.current'),
$next = ($curr.prev().length) ? $curr.prev() : $('.main-slider .slide').last();
transitionIn($curr, $next);
}
//slide in
function transitionIn($curr, $next) {
clearInterval(interval);
$curr.css('z-index', 0).removeClass('current');
$next.show().css('z-index', 1).addClass('in').addClass('current');
$next.children().addClass('in');
setTimeout(function(){
$curr.hide();
$next.removeClass('in');
$next.children().removeClass('in');
},1000)
}
//slide out
function transitionOut($curr, $next) {
clearInterval(interval);
$curr.css('z-index', 1).addClass('out').removeClass('current');
$next.show().css('z-index', 0).addClass('current');
$curr.children().addClass('out');
setTimeout(function(){
$curr.hide();
$curr.removeClass('out');
$curr.children().removeClass('out');
},1000)
}
body, html {
margin:0;
height:100%;
}
/*slider*/
.main-slider {
height: 100%;
position: relative;
margin: 0 auto;
overflow: hidden;
}
.main-slider .cover {
object-fit: cover;
width: 100% !important;
height: 100%;
left: 0;
}
.main-slider img {
top: -9999px;
bottom: -9999px;
right: 0;
margin: auto;
position: absolute !important;
display: block;
float: left;
text-align: left;
overflow-x: hidden;
}
.slide {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
overflow: hidden;
display: none;
}
.cropped-image{
height: 100%;
margin: 0;
}
.slide.in {
z-index: 3;
transform: translateX(-0%);
-webkit-animation-duration: 1000ms;
animation-duration: 1000ms;
animation-name: slide-in;
-webkit-animation-direction: alternate-reverse;
-webkit-animation-timing-function: cubic-bezier(.82,0,.19,1); /* Safari 4.0 - 8.0 */
animation-timing-function: cubic-bezier(.82,0,.19,1);
}
.cropped-image.in {
transform: translateX(0%);
-webkit-animation-duration: 1000ms;
animation-duration: 1000ms;
-webkit-animation-name: slide-in-b;
animation-name: slide-in-b;
-webkit-animation-direction: alternate-reverse;
-webkit-animation-timing-function: cubic-bezier(.82,0,.19,1); /* Safari 4.0 - 8.0 */
animation-timing-function: cubic-bezier(.82,0,.19,1);
}
.slide.out {
transform: translateX(-0%);
-webkit-animation-duration: 1000ms;
animation-duration: 1000ms;
animation-name: slide-in;
-webkit-animation-direction: alternate;
-webkit-animation-fill-mode: forwards;
-webkit-animation-timing-function: cubic-bezier(.82,0,.19,1); /* Safari 4.0 - 8.0 */
animation-timing-function: cubic-bezier(.82,0,.19,1);
}
.cropped-image.out {
transform: translateX(0%);
-webkit-animation-duration: 1000ms;
animation-duration: 1000ms;
-webkit-animation-name: slide-in-b;
animation-name: slide-in-b;
-webkit-animation-direction: alternate;
-webkit-animation-fill-mode: forwards;
-webkit-animation-timing-function: cubic-bezier(.82,0,.19,1); /* Safari 4.0 - 8.0 */
animation-timing-function: cubic-bezier(.82,0,.19,1);
}
@keyframes slide-in {
0% {transform: translateX(-0%);}
100% {transform: translateX(-100%);}
}
@keyframes slide-in-b {
0% {transform: translateX(0%);}
100% {transform: translateX(100%);}
}
.next {
position: absolute;
height: 80px;
background: #141212;
width: 80px;
right: 0;
bottom: 50%;
z-index: 9;
}
.previous {
position: absolute;
height: 80px;
background: #141212;
width: 80px;
left: 0;
bottom: 50%;
z-index: 9;
}
/* end of slider*/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="next"></div>
<div class="previous"></div>
<div class="main-slider">
<div class="slide">
<figure class="cropped-image">
<img src="https://images.unsplash.com/photo-1508108712903-49b7ef9b1df8?auto=format&fit=crop&w=2250&q=60&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D" class="cover">
</figure>
</div>
<div class="slide">
<figure class="cropped-image">
<img src="https://images.unsplash.com/photo-1507980668227-a52aa457699b?auto=format&fit=crop&w=2250&q=60&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D" class="cover">
</figure>
</div>
<div class="slide">
<figure class="cropped-image">
<img src="https://images.unsplash.com/photo-1497030855747-0fc424f89a4b?auto=format&fit=crop&w=2250&q=60&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D" class="cover">
</figure>
</div>
</div>
希望这有助于
我刚刚更新了小提琴,因为您的转换有点不同 - https://fiddle.jshell.net/Jim_Miraidev/xjLr1a18/ –
非常感谢你为此工作。是的,我想实现一个类似的过渡(动画)到这个:https://fiddle.jshell.net/k1ea93xt/19/在你的小提琴有一个阶段,当所有三个图像都显示:无 – Lukas
只是更新上面的代码 –
我会很高兴,甚至检测主滑块中的下一个和上一个div – Lukas