jquery

[alin20]

سلام خسته نباشید
بنده یه اسلایدر با جی کویری دارم میخوام یه اسلاید سلکتور بهش اضافه بشه که با رفتن به عکس بعدی اکتیو بشه ..و همینطور وقتی موس روی آن رفت متوقف شود:
کد ها
کد 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).delay(1000).fade To(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');


});