Javascript Java脚本相互冲突

我试图在一个页面中使用两个单独的脚本，当然它们会相互冲突。我对JavaScript还是有点陌生，所以我不知道如何修复它。如果有人和我分享他或她的智慧，我会非常感激

这是我的密码：

$(document).ready(function() {
var slider = {


  el: {
  slider: $("#slider"),
allSlides: $(".slide"),
sliderNav: $(".slider-nav"),
allNavButtons: $(".slider-nav > a")
},

timing: 800,
slideWidth: 1349, 

init: function() {
this.bindUIEvents();
},

bindUIEvents: function() {

this.el.slider.on("scroll", function(event) {
  slider.moveSlidePosition(event);
});

this.el.sliderNav.on("click", "a", function(event) {
  slider.handleNavClick(event, this);
});

},

moveSlidePosition: function(event) {

this.el.allSlides.css({
  "background-position": $(event.target).scrollLeft()/0-1349+ "px 0"
});  
},

handleNavClick: function(event, el) {
event.preventDefault();
var position = $(el).attr("href").split("-").pop();

this.el.slider.animate({
  scrollLeft: position * this.slideWidth
}, this.timing);

this.changeActiveNav(el);
},

changeActiveNav: function(el) {
this.el.allNavButtons.removeClass("active");
$(el).addClass("active");
}

};

slider.init();
});

$(document).ready(function() {
function filterPath(string) {
return string
.replace(/^\//,'')
.replace(/(index|default).[a-zA-Z]{3,4}$/,'')
.replace(/\/$/,'');
 }
 var locationPath = filterPath(location.pathname);
 var scrollElem = scrollableElement('html', 'body');

 $('a[href*=#]').each(function() {
 var thisPath = filterPath(this.pathname) || locationPath;
 if (  locationPath == thisPath
 && (location.hostname == this.hostname || !this.hostname)
 && this.hash.replace(/#/,'') ) {
  var $target = $(this.hash), target = this.hash;
  if (target) {
    var targetOffset = $target.offset().top;
    $(this).click(function(event) {
      event.preventDefault();
      $(scrollElem).animate({scrollTop: targetOffset}, 1100, function() {
        location.hash = target;
      });
    });
    }
   }
 });

 function scrollableElement(els) {
 for (var i = 0, argLength = arguments.length; i <argLength; i++) {
  var el = arguments[i],
      $scrollElement = $(el);
  if ($scrollElement.scrollTop()> 0) {
    return el;
  } else {
    $scrollElement.scrollTop(1);
    var isScrollable = $scrollElement.scrollTop()> 0;
    $scrollElement.scrollTop(0);
    if (isScrollable) {
      return el;
    }
   }
  }
  return [];
 }

 });

$（文档）.ready（函数（）{
变量滑块={
el:{
滑块：$（“#滑块”），
所有幻灯片：$（“.slide”），
sliderNav:$（“.sliderNav”），
所有导航按钮：$（“.slider nav>a”）
},
时间：800，
滑动宽度：1349，
init:function（）{
this.bindUIEvents（）；
},
bindUIEvents:函数（）{
此.el.slider.on（“滚动”），函数（事件）{
slider.moveSlidePosition（事件）；
});
此.el.sliderNav.on（“单击”，“a”，函数（事件）{
slider.handleNavClick（事件，此）；
});
},
moveSlidePosition:函数（事件）{
this.el.allSlides.css({
“背景位置”：$（event.target）.scrollLeft（）/0-1349+“px 0”
});  
},
handleNavClick：函数（事件，el）{
event.preventDefault（）；
var position=$（el.attr（“href”）.split（“-”）.pop（）；
这个.el.slider.animate({
向左滚动：位置*this.slideWidth
}，这是时间）；
这是一个动态导航（el）；
},
更改活动导航：功能（el）{
此.el.allNavButtons.removeClass（“活动”）；
$（el）.addClass（“活动”）；
}
};
slider.init（）；
});
$（文档）.ready（函数（）{
函数筛选器路径（字符串）{
返回字符串
.替换（/^\/，''）
.replace（/（索引|默认值）。[a-zA-Z]{3,4}$/，“”）
.替换（/\/$/，''）；
}
var locationPath=filterPath（location.pathname）；
var scrolleem=scrollableElement（'html'，'body'）；
$（'a[href*=#]'）。每个（函数（）{
var thisPath=filterPath（this.pathname）| | locationPath；
如果（locationPath==此路径
&&（location.hostname==this.hostname | |！this.hostname）
&&this.hash.replace（/#/，''）{
var$target=$（this.hash），target=this.hash；
如果（目标）{
var targetOffset=$target.offset（）.top；
$（此）。单击（函数（事件）{
event.preventDefault（）；
$（scrollElem）.animate（{scrollTop:targetOffset}，1100，function（）{
location.hash=目标；
});
});
}
}
});
函数可滚动元素（els）{
for（var i=0，argLength=arguments.length；i 0）{
返回el；
}否则{
$scrollElement.scrollTop（1）；
变量isScrollable=$scrollElement.scrollTop（）>0；
$scrollElement.scrollTop（0）；
如果（可循环使用）{
返回el；
}
}
}
返回[]；
}
});

你到底在问什么。它们是如何冲突的？您看过任何开发人员控制台的输出吗？它报告了什么错误、警告？如果我把它们放在单独的页面中，它们工作正常。如果我把它们放在一个页面中，第一个用于滚动页面，效果很好，但是第二个，即图片滑块，工作起来有点马虎。它似乎从第一个脚本中提取了一些元素，因为它会上下滑动一点，尽管它不应该这样做