Merhaba arkadaşlar. Bu yazımda size Html , Javascript ve Javascriptin bir kütüphanesi olan Jquery kullanarak pek çok haber sitesinde görebileceğiniz bir slider hazırladım. Kodların detaylı açıklamasını sitem üzerinden okuyabilirsiniz ve indirebilirsiniz.

Link : http://www.ibrahimalkan.com/jquery-ile-manset-slider-yapimi/
Örnek : http://www.ibrahimalkan.com/test/mansetx

#mansetx{
float: left;
border: 1px #ccc solid;
}
#mansetx-selector ul{
float: left;
width: 100%;
height: 30px;
background: #f1f1f1;
margin:0;
padding: 0;

}
#mansetx-selector ul li{
float: left;
list-style: none;
width:25px;
font-size: 15px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: bold;
text-align: center;
line-height: 30px;
transition: background 0.3s;

}
#mansetx-selector ul li:hover{
cursor:pointer;
}
#mansetx-selector ul .active{
background: red;
color: white;
text-shadow:0 1px 3px rgba(0, 0, 0, 0.3);

}

$(document).ready(function(){
var slider = 0; //Sliderın kaçıncı resimde olduğunu anlamamızı sağlayacak değişken
var imgcount = $("#mansetx-img a").length-1; //Slider içindeki toplam resim sayısı
var slidermansetx; //Sliderımızın zamanla değişme işlemini atayacağımız değişken


$("#mansetx-img a").each(function(index){

$(this).addClass("mansetx-img-"+index);
if (index == 0) {
$(this).css("display","block");
}else{
$(this).css("display","none");
}
})

for (var i = 0; i <= imgcount; i++) {
$("#mansetx-selector ul").append('

'+(i+1)+'

');
};
$("#mansetx-selector ul li:nth-child("+(slider+1)+")").addClass("active");

$("#mansetx-selector ul li").mouseenter(function(){
$("#mansetx-selector ul li").removeClass("active");
$(this).addClass("active");
slider = $(this).html()-1;
$("#mansetx-img a").css("display","none");
$(".mansetx-img-"+slider).css("display","block");
})




function mansetxbasla(){
slidermansetx = setInterval(function(){
$("#mansetx-img a").css("display","none");
$(".mansetx-img-"+slider).css("display","block");
$("#mansetx-selector ul li").removeClass("active");
$("#mansetx-selector ul li:nth-child("+(slider+1)+")").addClass("active");
slider++;
if (slider > imgcount) {slider = 0};
},3000);
}

function mansetxdur(){
clearInterval(slidermansetx);
}

$("#mansetx").mouseenter(function(){
mansetxdur();
})

$("#mansetx").mouseleave(function(){
mansetxbasla();
})

mansetxbasla();

})

Ek Olarak: