Пересекаются js файлы, как решить проблему?

вопрос

Пересекаются js файлы, как решить проблему?

точнее 2 слайдера
вот такой:

// javascript Document
(function ($) {
var hwSlideSpeed = 700;
var hwTimeOut = 3000;
var hwNeedLinks = true;

$(document).ready(function(e) {
    $('.slide').css(
        {"position" : "absolute",
         "top":'0', "left": '0'}).hide().eq(0).show();
    var slideNum = 0;
    var slideTime;
    slideCount = $("#slider .slide").size();
    var animSlide = function(arrow){
        clearTimeout(slideTime);
        $('.slide').eq(slideNum).fadeOut(hwSlideSpeed);
        if(arrow == "next"){
            if(slideNum == (slideCount-1)){slideNum=0;}
            else{slideNum++}
            }
        else if(arrow == "prew")
        {
            if(slideNum == 0){slideNum=slideCount-1;}
            else{slideNum-=1}
        }
        else{
            slideNum = arrow;
            }
        $('.slide').eq(slideNum).fadeIn(hwSlideSpeed, rotator);
        $(".control-slide.active").removeClass("active");
        $('.control-slide').eq(slideNum).addClass('active');
        }
if(hwNeedLinks){
var $linkArrow = $('<a id="prewbutton" href="#">&lt;</a><a id="nextbutton" href="#">&gt;</a>')
    .prependTo('#slider');        
    $('#nextbutton').click(function(){
        animSlide("next");
        return false;
        })
    $('#prewbutton').click(function(){
        animSlide("prew");
        return false;
        })
}
    var $adderSpan = '';
    $('.slide').each(function(index) {
            $adderSpan += '<span class = "control-slide">' + index + '</span>';
        });
    $('<div class ="sli-links">' + $adderSpan +'</div>').appendTo('#slider-wrap');
    $(".control-slide:first").addClass("active");
    $('.control-slide').click(function(){
    var goToNum = parseFloat($(this).text());
    animSlide(goToNum);
    });
    var pause = false;
    var rotator = function(){
            if(!pause){slideTime = setTimeout(function(){animSlide('next')}, hwTimeOut);}
            }
    $('#slider-wrap').hover(    
        function(){clearTimeout(slideTime); pause = true;},
        function(){pause = false; rotator();
        });
    rotator();
});
})(jQuery);

И вот такой

<div id="slider-wr">
    <div id="sliderr">
        <div class="slid"><img src="{THEME}/hwSlider/img/001.png" width="684" height="297"></div>
        <div class="slid"><img src="{THEME}/hwSlider/img/002.png" width="684" height="297"></div>
        <div class="slid"><img src="{THEME}/hwSlider/img/003.png" width="684" height="297"></div>
        
    </div>
</div>

js слайдера

(function ($) {
var hwSlideSpeed = 700;
var hwTimeOut = 3000;
var hwNeedLinks = true;

$(document).ready(function(e) {
    $('.slid').css(
        {"position" : "absolute",
         "top":'0', "left": '0'}).hide().eq(0).show();
    var slideNum = 0;
    var slideTime;
    slideCount = $("#sliderr .slid").size();
    var animSlide = function(arrow){
        clearTimeout(slideTime);
        $('.slid').eq(slideNum).fadeOut(hwSlideSpeed);
        if(arrow == "next"){
            if(slideNum == (slideCount-1)){slideNum=0;}
            else{slideNum++}
            }
        else if(arrow == "prew")
        {
            if(slideNum == 0){slideNum=slideCount-1;}
            else{slideNum-=1}
        }
        else{
            slideNum = arrow;
            }
        $('.slid').eq(slideNum).fadeIn(hwSlideSpeed, rotator);
        $(".control-slid.active").removeClass("active");
        $('.control-slid').eq(slideNum).addClass('active');
        }
if(hwNeedLinks){
var $linkArrow = $('<a id="prewbutt" href="#">&lt;</a><a id="nextbutt" href="#">&gt;</a>')
    .prependTo('#sliderr');        
    $('#nextbutt').click(function(){
        animSlide("next");
        return false;
        })
    $('#prewbutt').click(function(){
        animSlide("prew");
        return false;
        })
}
    var $adderSpan = '';
    $('.sliderr').each(function(index) {
            $adderSpan += '<span class = "control-slide">' + index + '</span>';
        });
    $('<div class ="slii-links">' + $adderSpan +'</div>').appendTo('#slider-wr');
    $(".control-slide:first").addClass("active");
    $('.control-slide').click(function(){
    var goToNum = parseFloat($(this).text());
    animSlide(goToNum);
    });
    var pause = false;
    var rotator = function(){
            if(!pause){slideTime = setTimeout(function(){animSlide('next')}, hwTimeOut);}
            }
    $('#slider-wr').hover(    
        function(){clearTimeout(slideTime); pause = true;},
        function(){pause = false; rotator();
        });
    rotator();
});
})(jQuery);

Они пересекаются сколько в одном слайдов столько и в другом и не пойму в чем дело... плохо разбираюсь в js но переименовал что мог и видимо что то упустил, подскажите пожалуйста?