var maxRight = $('.gray').width() - $('.red').width();
var maxLeft = 0;
var img = $('.pic');
var step = parseInt(maxRight/$('.pic').length);

console.log('sivo: '+$('.gray').width()+' broi: '+ $('.pic').length + ' step: '+step);

$(".flex-next").click(function(){

    var marginLeft = parseInt($('.red').css('margin-left'));
    var marginLeftStep = marginLeft+step;

    if (marginLeft == maxRight ) {
        $('.red').animate( {'margin-left': 0} );
    }

    else if ( marginLeftStep > maxRight) {
        $('.red').animate( {'margin-left': maxRight} );
    }

    else {
        $('.red').animate( {'margin-left': marginLeftStep} );
    }

    console.log('margin-left: '+ marginLeft +' maxRight: '+maxRight);

});

$(".flex-prev").click(function(){

    var marginLeft = parseInt($('.red').css('margin-left'));
    var marginLeftStep = marginLeft+step;

    if (marginLeft == maxLeft ) {
        $('.red').animate( {'margin-left': maxRight} );
    }

    else if( marginLeft < step ) {
        $('.red').animate( {'margin-left': 0} );
    }

    else {
        $('.red').animate( {'margin-left': marginLeft-step} );
    }
    console.log('margin-left: '+marginLeft+' maxRight: '+maxRight);
});