Question

I have this jQuery to set a slider functions. This slider is the whole screen width and height, so when I resize the window, i need it to recalculate those sizes. I tried to duplicate the same codes on both triggers, but it didn’t change anything. Can you guys help please?

The code on $(document).ready is the following:

qtPhotos = $('#slider ul li').length;
windowWidth = $(window).width();
windowHeight = $(window).height();

$('#slider').width(windowWidth).height(alturaJanela);
$('#slider > ul').width(windowWidth * qtPhotos);
$('#slider > ul > li').width(windowWidth).height(windowHeight);

$('#slider > ul > li:first').before($('#slider > ul > li:last'));
$('#slider > ul').css('marginLeft', '-'+windowWidth+'px');

$('#seta-next').click(function(){
    $('#slider > ul').stop(true, true).animate({'left': "-="+windowWidth+"px"}, 500, 'easeInQuad', function(){
        $('#slider > ul > li:last').after($('#slider > ul > li:first'));
        $('#slider > ul').css("left", "+="+windowWidth+"px");
    });
}); 

$('#seta-prev').click(function(){
    $('#slider > ul').stop(true, true).animate({'left': "+="+windowWidth+"px"}, 500, 'easeInQuad', function(){
        $('#slider > ul > li:first').before($('#slider > ul > li:last'));
        $('#slider > ul').css("left", "-="+windowWidth+"px");
    });
}); 

Answer 1

That entire block of code would need to be wrapped in a $(window).resize() . Have you got it like that already?

So –

$(window).resize(function() {

// all your code here 

}).trigger("resize");