I built a website and added several Javascript modules. The slider reel in the orange rectangle box is not working after I uploaded it to the server. It works fine locally on my machine though. I checked the code but I cannot figure out where I am going wrong with it.

The website is www.southerncrossbow.com. I have placed the CSS and HTML below. I am using the "slides.min.jquery.js" file.

Please help if you can. I am completely stumped at this point.

This is the HTML below:

<!-- Reel slider -->
<div id="reel">
<div class="slides_container">

<div class="slide-box">
<div class="box-container">
<a href="https://plus.google.com/u/0/102284404039032982557/posts" target="blank"><img src="images/googleplus.jpg" class="box-icon" alt="Don't forget to Google Plus Southern Crossbow!"/></a>
</div>
<div class="box-container">
<a href="https://www.facebook.com/pages/Southern-Crossbow/318559141606458?fref=ts" target="blank"><img src="images/southerncrossbow_facebook.jpg" class="box-icon" alt="Like us on Southern Crossbow's Facebook Page!"/>
</div>
<div class="box-container">
<a href="https://www.youtube.com/user/southerncrossbow" target="blank"><img src="images/southerncrossbow_youtube.jpg" class="box-icon" alt="The newest product of Southern Crossbow!"/></a>
</div>
<div class="box-container">
<a href="https://twitter.com/southerncrssbw" target="blank"><img src="images/southerncrossbow_twitter.jpg" class="box-icon" alt="Follow our Southern Crossbow tweets!"/></a>
</div>
</div>

<div class="slide-box">
<div class="box-container">
<img src="images/southerncrossbow_lifestyle01.jpg" class="box-icon" alt="Southern Crossbow - Smarter"/>
</div>
<div class="box-container">
<img src="images/southerncrossbow_lifestyle02.jpg" class="box-icon" alt="Southern Crossbow - Tactical"/>
</div>
<div class="box-container">
<img src="images/southerncrossbow_lifestyle03.jpg" class="box-icon" alt="Southern Crossbow - Reliable"/>
</div>
<div class="box-container">
<img src="images/southerncrossbow_lifestyle04.jpg" class="box-icon" alt="Southern Crossbow - Accuracy"/>
</div>
</div>
</div>
<a href="#" class="prev"></a>
<a href="#" class="next"></a>
</div>
<!-- ENDS Reel slider -->


This is the CSS below:

/* REEL ------------------------------------------------------------*/

#reel{
position: relative;
width: 980px;
height: 250px;
margin-left: -20px;
margin-bottom: 15px;
background: url(../img/reel-back.png) no-repeat;
}

#reel .prev{
position: absolute;
top: 85px;
left: 0px;
display: block;
width: 45px;
height: 40px;
background: url(../img/reel-left.png) no-repeat;
}

#reel .next{
position: absolute;
top: 85px;
right: 0px;
display: block;
width: 45px;
height: 40px;
background: url(../img/reel-right.png) no-repeat;
}


#reel .prev:hover,
#reel .next:hover{
background-position: 0px -40px;
}

#reel .slides_container{
position: absolute;
overflow: hidden;
top: 20px;
left: 40px;
width: 898px;
height: 230px;

}

#reel .slides_container .slide-box{
width: 898px;
height: 300px;
padding-left: 5px;
padding-right: 5px;
}

#reel .slides_container .box-container{
overflow: hidden;
float: left;
width: 213px;
margin-top: 0px;
margin-right: 5px;
margin-bottom: 0px;
margin-left: 5px;
}

#reel .slides_container .box-container h6{
color: #484848;
margin-top: 5px;
margin-bottom: 7px;
}

#reel .box-icon{
float: left;
margin-right: 5px;
}

#reel .slides_container .box-divider{
clear: both;
border-bottom: 1px solid #ccc;
padding-bottom: 5px;
margin-bottom: 5px;
}