Я пытаюсь создать слайдер, в котором первый слайд состоит из половины первого слайда и половины следующего, но когда пользователь нажимает предыдущий / следующий, слайдер должен показывать слайд полностью.
Теперь мне удалось создать эту часть, и она работает, за исключением случаев, когда я нахожусь на первом слайде и пытаюсь переместить предыдущий, анимация слайдера не работает.
$(document).ready(function(){
var boolRemove = 0;
var slider = $('.slider').slick({
'centerMode': false,
'speed' : 300,
infinite: false,
cssTransition: true,
draggable: false,
initialSlide: 0,
});
$(".slick-list").addClass("half-slide");
$(".slider").on("beforeChange", function(event, slick, currentSlide, nextSlide){
if(!boolRemove) {
$(slick.$slides.slice(2,slick.$slides.length)).hide();
setTimeout(function(){
$(slick.$slides.slice(2,slick.$slides.length)).show();
}, 350);
$(".slick-list").removeClass("half-slide");
boolRemove = 1;
}
console.log( currentSlide );
});
$(".slick-arrow").on("click", function(){
if ($(".slider").slick("slickCurrentSlide") == 0) {
$(".slick-list").removeClass("half-slide");
}
});
});
Пример скрипта:
https://jsfiddle.net/brec38t0/1/