I have a flex div, in which there are 3 more divs with different amounts of content, which when you click on the button translateX(-100%) are shifted translateX(-100%) . In order to keep the footer under the content of the current slide, I need to hide the content of the previous one, but only after it leaves viewport, for this I use setTimeout (), when reaching the last slide, all the content returns to translateX(0) , but for some reason, hidden content is not displayed.

 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)`); } });

    1 answer 1

    Try this:

     var thisElement = $('.services-item',services[count-1]); setTimeout(function () { thisElement.hide(); }, 500);
    • The fact is that each slide has a different height due to the difference in the volume of content, so if you only make it invisible, then the distance between the current slide and the footer will always be equal to the height of the tallest slide, which spoils the appearance - Anton_J
    • Can you throw off the full code? - bla bla213213213
    • Unfortunately not, but the error crept into the logic of js. If you remove setTimeout (), then the problem does not arise, but the result is not cosmetically correct, so it is precisely in the nuance of the implementation of this method that, as I believe, lies the error - Anton_J
    • updated the answer to the question - bla bla213213213
    • one
      Thanks, it helped, only now on repeated scrolling of the slider, the content of the last element is not displayed, but I will deal with this, thanks again. - Anton_J 1:16 pm