У меня есть гибкий слайдер с 3 делениями, заполненными разным количеством контента. Когда кнопка нажата, все эти div translateX(-100%)
.
Чтобы нижний колонтитул всегда был в нижней части видимого содержимого, мне нужно скрыть содержимое предыдущего слайда, но делать это только тогда, когда он покидает область просмотра. Для этого я использую setTimeout()
. Когда ползунок достигает предела слайдов, все переводится обратно на X(0)
, но я не могу понять, почему мои скрытые элементы не отображаются. Я думаю, мои глаза уже намылены, пожалуйста, помогите.
let count = 0;
let services = Array.from(document.querySelectorAll('article'));
$('#services-prev').on('click', function() {
if (count > 0) {
count--;
$('.services-slide').css('transform', `translateX(-${count*100}%)`);
$('#services-articles article').css('transform', `translateX(-${count*100}%)`);
$('.services-item', services[count]).show();
};
});
$('#services-next').on('click', function() {
if (count < 3) {
count++;
$('.services-slide').css('transform', `translateX(-${count*100}%)`);
$('#services-articles article').css('transform', `translateX(-${count*100}%)`);
setTimeout(function() {
$('.services-item', services[count - 1]).hide()
}, 500);
}
if (count >= 3) {
$('.services-item').show();
count = 0;
//$('.services-slide').appendTo($('.services-slider-container'));
$('.services-slide').css('transform', `translateX(0)`);
$('#services-articles article').css('transform', `translateX(0)`);
}
});