jquery

سلام خسته نباشید
بنده یه اسلایدر با جی کویری دارم میخوام یه اسلاید سلکتور بهش اضافه بشه که با رفتن به عکس بعدی اکتیو بشه ..و همینطور وقتی موس روی آن رفت متوقف شود:
کد ها
کد html اسلایدر و اسلاید سلکتور:

<div id="slider">
<div id="slider-container">
<img src="images/slider1.jpg" id="img1" />
<img src="images/slider2.jpeg" id="img2" />
<img src="images/slider3.jpg" id="img3" />
<img src="images/slider5.jpg" id="img4" />


</div>
<div id="buttons">
<span id="next" class="color">&#x45;</span>
<span id="prev" class="color">&#x44;</span>
</div>
<div class="slide-select">
<ul>
<li><a href="#img1" ></a></li>
<li><a href="#img2"></a></li>
<li><a href="#img3"></a></li>
<li><a href="#img4" class="active"></a></li>
</ul>
</div>


</div>

کد css

#slider{
position:relative;
top:113px;
width:100%;
height:500px;
background-color:white;
}
#slider-container{
position:relative;
width:99.79%;
height:99%;
margin:2px;
background-color:white;
}
#slider-container img{
position:absolute;
width:100%;
height:500px;
}
#buttons
{
width: 100%;
height: 32px;
position: relative;
float: right;
display: block;
margin: -255px auto;
}


#next
{
float: right;
margin-right: 8px;
cursor: pointer;
font-family: EI;
font-size: 30pt;
}


#prev
{
float: left;
margin-left: 8px;
cursor: pointer;
font-family: EI;
font-size: 30pt
}
.color{
color:white;
transition:all 1s;
}
.color:hover{
color:#FFCC00;
transform:scale(1.3);
}
.slide-select{
position: absolute;
right: 49%;
bottom: 20px;
}
.slide-select li{
background: #fff;
width: 10px;
height: 10px;
border-radius: 50%;
float: right;
margin-left: 3px;
}
.slide-select li a{
position: absolute;
width: 10px;
height: 10px;
}
.slide-select li a:hover{
background-color: #FFF4C8;
border-radius: 50%;
}
.active{
background-color:#FFCC00;
border-radius: 50%;
}

کد جی کویری:

setInterval(function(){
$('#slider-container :first-child').fadeOut(5000)
.next('img').fadeIn()
.end().appendTo('#slider-container');
},8000);
$("#loading").fadeTo(1000,1).fadeTo(1000,0.9).dela y(1000).fadeTo(1000,0.5).fadeOut(1000);
$('#next').click(function(){


$('#slider-container :first-child').hide().next('img').show().end().appendTo(' #slider-container');


});

$('#prev').click(function(){


$('#slider-container :last-child').hide().prev('img').show().end().prependTo( '#slider-container');


});