slick slider с анимацией

Question

Я использую slick slider с анимацией на моем сайте. все отлично работает, за исключением случаев, когда я перетаскиваю слайд, если не перемещается на следующий или предыдущий слайд. Я не хочу использовать анимацию.

<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> 

здесь jsfiddle

Answer 1

Вы используете id из name для нескольких элементов, которые не является действительным. id s всегда должны быть уникальными. Вместо таргетинга на имена слайдов с помощью id вы можете назначить общий класс, например. slide-name

Для того, чтобы функциональность для работы, как вы хотите, вам придется использовать дополнительное мероприятие под названием , которая проходит после afterChange события. Однако, прежде чем вводить дополнительные обработчики событий, вам нужно будет отслеживать текущий слайд с помощью события beforeChange, а затем проверить, соответствует ли следующий слайд текущему слайду в событии afterChange. Если текущий слайд и следующий слайд совпадают (никаких изменений не произошло), пропустите анимацию. Если они не совпадают (произошло изменение), активируйте анимацию.

Используйте событие afterChange, чтобы инициировать анимацию, только если текущий слайд и следующий слайд не совпадают, то есть активный слайд изменился. Используйте переменные для отслеживания текущего и следующего слайдов, например. currSlide и nextSlide соответственно. Затем в событии вы можете запускать анимацию, сравнивая currSlide с nextSlide.

Наконец, я добавил вспомогательный метод для применения classhidden к именам слайдов, которые в настоящее время не видны. Это предотвращает преждевременное появление текста и разрушение анимации. Я вызываю этот метод на init, а также в событии .

ОБНОВЛЕНО 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

Если у вас есть какие-либо вопросы, пожалуйста, спрашивайте.

Answer 2

попробовать это; установить скорость до нуля, чтобы отключить анимацию:

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