滑块跳过一个幻灯片，同时单击下一步/ prev

Question

我有两个挑战来构建我自己的旋转木马。

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提前。

Answer 1

我更新了你的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>

希望这有助于