Пользовательская проблема слайдера фона JQuery css с навигацией

Проблема в том, что события click не развязаны должным образом и интервал не останавливается при переходе от одного проекта к другому. Для этого вам нужно определить triggers и timingRun вне обработчика событий и сбрасывать их каждый раз, когда вы входите в обработчик:

if(triggers){
    triggers.off('click');
    triggers = null;
}
if(timingRun){
    clearInterval(timingRun);
    timingRun = null;
}

Полный фрагмент кода будет выглядеть так:

var triggers,
timingRun;

$(".project h2").click(function() {
    if(triggers){
        triggers.off('click');
        triggers = null;
    }
    if(timingRun){
        clearInterval(timingRun);
        timingRun = null;
    }
    if ($(this).parent().hasClass('opened')) {
        $(".projectbgs").remove();
        var projectid = $(this).parent().data("projectid");
        var titlewidth = $(this).width();
        var titleholderwidth = $(this).parent().width();
        var titleposition = titleholderwidth - titlewidth;
        $(this).css({left: 0});
        $(this).animate({'margin-right': 0}, 300);
        $('.project h2').css({'margin-left': 'auto', 'font-size': '', 'color': ''});
        $(".project").removeClass("opened");
    }
    else {
        $('.project h2').css({'margin-left': 'auto', 'font-size': '', 'color': ''});
        $(".project").removeClass("opened");
        $(".projectbgs").remove();
        var projectid = $(this).parent().data("projectid");
        $(this).parent().addClass('opened', 500);
        var titlewidth = $(this).width();
        var titleholderwidth = $(this).parent().width();
        var titleposition = titleholderwidth - titlewidth;
        $(this).css({left: titleposition});
        $(this).animate({'margin-left': 0}, 300);

        if (projectid === 1) {
            $('body').append($('<div id="projectbg-' + projectid + '" class="projectbgs">   <ul class="bgimages">    <li class="image" style="background-image: url(\'http://upload.wikimedia.org/wikipedia/commons/thumb/9/97/The_Earth_seen_from_Apollo_17.jpg/270px-The_Earth_seen_from_Apollo_17.jpg\');"> </li>     <li class="image" style="background-image: url(\'http://upload.wikimedia.org/wikipedia/commons/thumb/e/e1/FullMoon2010.jpg/280px-FullMoon2010.jpg\');"> </li>  </ul> </div>'));
        }
        else if (projectid === 2) {
            $('body').append($('<div id="projectbg-' + projectid + '" class="projectbgs">   <ul class="bgimages">    <li class="image" style="background-image: url(\'http://www.mallorcaweb.net/masm/Planetas/Jupiter.jpg\');"> </li>   <li class="image" style="background-image: url(\'http://upload.wikimedia.org/wikipedia/commons/thumb/0/06/Neptune.jpg/240px-Neptune.jpg\');"> </li>    </ul> </div>'));
        }
        var viewportwidth = $(window).width();
        $('#projectbg-' + projectid + ' ul li').each(function(index) {
            $(this).css({width: viewportwidth});
        });
        $(window).resize(function() {
            $('#projectbg-' + projectid + ' ul li').each(function(index) {
                $(this).css({width: viewportwidth});
            })
        });
        triggers = $('#project-' + projectid + ' ul.triggers li');
        var images = $('ul.bgimages li');
        var lastElem = triggers.length - 1;
        var mask = $('.projectbgs ul.bgimages');
        var imgWidth = images.width();
        var target;
        triggers.first().addClass('active');
        mask.css('width', imgWidth * (lastElem + 1) + 'px');
        function sliderResponse(target) {
            mask.stop(true, false).animate({'left': '-' + imgWidth * target + 'px'}, 1000);
            triggers.removeClass('active').eq(target).addClass('active');
        }
        triggers.click(function() {
            if (!$(this).hasClass('active')) {
                target = $(this).index();
                sliderResponse(target);
                resetTiming();
            }
        });
        function sliderTiming() {
            target = $('ul.triggers li.active').index();
            target === lastElem ? target = 0 : target = target + 1;
            sliderResponse(target);
        }
        timingRun = setInterval(function() {
            sliderTiming();
        }, 7000);
        function resetTiming() {
            clearInterval(timingRun);
            timingRun = setInterval(function() {
                sliderTiming();
            }, 7000);
        }
    }
});