Uncaught RangeError: Maximum call stack size exceeded jquery

[vini_loock]

Um script que estou escrevendo está parando de executar depois de algumas repetições devido ao erro descrito no titulo

Sei o que causa esse erro, porem não sei onde está acontecendo.

O código é este:

window.productsList = [
    {
        link: '#link2',
        title: 'Title2',
        text: 'Description2',
        image: 'images/banner2.png',
        thumb: 'images/thumbs/banner2.png'
    },{
        link: '#link',
        title: 'Title',
        text: 'Description',
        image: 'images/banner1.png',
        thumb: 'images/thumbs/banner1.png'
    }
];

(function($, list){
    
    $(function(){
        
        var $main = $('#header-banner');
        var $imageParent = $main.find('.the-image');
        var $text = $main.find('p');
        var $title = $main.find('h2');
        var $links = $main.find('a.the-image, a.btn-details, a.btn-buy');
        var $mainList = $main.find('ul');
        var active = 0;
        
        for(i = 0; i < list.length; i++){
            var $_li = $('<li />');
            var $_image = $('<img />');
            var $_title = $('<h3 />');
            
            $_image
                .attr('src', list[i].thumb)
                .addClass('slide_'+i)
                .appendTo($_li);
            
            $_title
                .html(list[i].title)
                .appendTo($_li);
            
            $_li.appendTo($mainList);
        }
        
        function selectSlide(i){
            $links.attr('href', list[i].link);
            $mainList.find('img.slide_'+i).parent().addClass('active');
            
            $title.animate({opacity:0}, function(){
                $(this).html(list[i].title);
                $(this).animate({opacity:1});
            });
            
            $text.animate({opacity:0}, function(){
                $(this).html(list[i].text);
                $(this).animate({opacity:1});
            });
            
            $imageParent.find('img').before(
                $('<img />').attr('src', list[i].image).hide().fadeIn()
            ).fadeOut();
        }
        
        function slideTimeOut(){
            active++;
            if(active >= list.length){
                active = 0;
            }
            selectSlide(active);
            slideInterval = window.setTimeout(slideTimeOut, 3000);
        }
        
        function createInterval(){
            slideInterval = window.setTimeout(slideTimeOut, 3000);
        }
        
        selectSlide(active);
        
        createInterval();
        
        $mainList.find('li img').click(function(e){
            var el = e.target;
            $mainList.find('li').removeClass('active');
            var i = el.className.split('_')[1];
            active = i;
            clearTimeout(slideInterval);
            selectSlide(active);
            createInterval();
        });
        
    });
    
})(jQuery, productsList);

Mas a parte que está com problemas é bem provavel que seja esta:

function selectSlide(i){
            $links.attr('href', list[i].link);
            $mainList.find('img.slide_'+i).parent().addClass('active');
            
            $title.animate({opacity:0}, function(){
                $(this).html(list[i].title);
                $(this).animate({opacity:1});
            });
            
            $text.animate({opacity:0}, function(){
                $(this).html(list[i].text);
                $(this).animate({opacity:1});
            });
            
            $imageParent.find('img').before(
                $('<img />').attr('src', list[i].image).hide().fadeIn()
            ).fadeOut();
        }
        
        function slideTimeOut(){
            active++;
            if(active >= list.length){
                active = 0;
            }
            selectSlide(active);
            slideInterval = window.setTimeout(slideTimeOut, 3000);
        }
        
        function createInterval(){
            slideInterval = window.setTimeout(slideTimeOut, 3000);
        }