Slick Slider mit Animationen

Question

Ich benutze Slick Slider mit Animation auf meiner Website. Alles funktioniert gut, außer wenn ich die Folie ziehe, wenn nicht auf die nächste oder vorherige Folie verschoben werde, möchte ich keine Animation verwenden.

<div id="my_slider"> 
    <div id="item"> 
    <div id="name" class="hidden">slide1</div> 
    </div> 
    <div id="item"> 
    <div id="name" class="hidden">slide2</div> 
    </div> 
    <div id="item"> 
    <div id="name" class="hidden">slide3</div> 
    </div> 
</div> 

hier ist jsfiddle

Answer 1

Sie eine id von name für mehrere Elemente verwenden, die nicht gültig ist. id s muss immer eindeutig sein. Anstatt auf die Foliennamen mit einem id zu zielen, können Sie eine gemeinsame Klasse z. slide-name

Damit die Funktionalität, wie Sie arbeiten möchten, müssen Sie den Einsatz eines zusätzlichen Ereignisses , die nach dem afterChange Ereignis läuft genannt werden. Bevor Sie jedoch zusätzliche Ereignisbehandlungsroutinen einleiten, müssen Sie die aktuelle Folie mithilfe des Ereignisses beforeChange verfolgen und dann überprüfen, ob die nächste Folie mit der aktuellen Folie im Ereignis afterChange übereinstimmt. Wenn die aktuelle Folie und die nächste Folie übereinstimmen (keine Änderung erfolgt), überspringen Sie die Animation. Wenn sie nicht übereinstimmen (eine Änderung stattgefunden hat), triggern Sie die Animation.

Verwenden Sie das Ereignis afterChange, um die Animation nur zu initiieren, wenn die aktuelle Folie und die nächste Folie nicht übereinstimmen, d. H. Die aktive Folie wurde geändert. Verwenden Sie Variablen, um die aktuelle und nächste Folie z. currSlide bzw. nextSlide. Im Ereignis können Sie die Animation auslösen, indem Sie currSlide mit nextSlide vergleichen.

Schließlich habe ich eine Hilfsmethode hinzugefügt, um eine class von hidden auf die Foliennamen anzuwenden, die derzeit nicht sichtbar sind. Dies verhindert, dass der Text vorzeitig erscheint und die Animation ruiniert. Ich rufe diese Methode auf init sowie in der Ereignis.

aktualisierte HTML

<div id="my_slider"> 
    <div class="item"> 
    <div id="name1" class="slide-name hidden">slide1</div> 
    </div> 
    <div class="item"> 
    <div id="name2" class="slide-name hidden">slide2</div> 
    </div> 
    <div class="item"> 
    <div id="name3" class="slide-name hidden">slide3</div> 
    </div> 
</div> 

jQuery

$('#my_slider').on('init', function(event, slick) { 
    $('.slick-active .slide-name').removeClass('hidden'); 
    applyHiddenClass(); 
}) 

$('#my_slider').slick({ 
    arrows: false, 
    speed: 900, 
}); 

var currSlide = 0; 
var nextSlide = 0; 

function applyHiddenClass() { 
    $.each($('.slick-slide'), function() { 
    if ($(this).attr('aria-hidden') == 'true') { 
     $(this).find('.slide-name').addClass('hidden'); 
    } else { 
     $(this).find('.slide-name').removeClass('hidden'); 
    } 
    }); 
} 

$('#my_slider').on('afterChange', function(event, slick, currentSlide) { 
    nextSlide = currentSlide; 
    if (nextSlide !== currSlide) { 
    $('.slick-active .slide-name').removeClass('animated zoomIn'); 
    $('.slick-active .slide-name').addClass('hidden'); 
    } 
}); 

$('#my_slider').on('setPosition', function(event, slick, currentSlide) { 
    if (nextSlide !== currSlide) { 
    $('.slick-active .slide-name').removeClass('hidden'); 
    $('.slick-active .slide-name').addClass('animated zoomIn'); 
    } 
    applyHiddenClass(); 
}); 

$('#my_slider').on('beforeChange', function(event, slick, currentSlide) { 
    currSlide = currentSlide; 
}); 

Fiddle Demo

Wenn Sie Fragen haben, wenden Sie sich bitte.

Answer 2

dies versuchen; eingestellte Geschwindigkeit auf Null Animation deaktivieren:

$('#my_slider').slick({ 
    arrows: false, 
    speed: 0, 
});