merhaba arkadaşlar. bu yazımda sizlerle jquery kullanarak slider yapmayı anlatacağım.

bu yazımda jquery komutlarını kullanarak basit bir slider yapacağız.

öncelikle slider nedir kısaca açıklayalım.

bloklarda gördüğümüz bir kavramdır web setinizin sağında ve ya solunda bulunan yan menülere slider diyoruz işte bu sliderin yapımını kavramak için basit bir slider yapacağız.

kodları yazmadan önce yapılması gerekenleri inceleyelim.

slider adında bir klasör oluşturun.

klasör içerisinde index.html dosyası oluşturalım burada kodlarımızın çalışacağı ana sayfamız yer alacaktır. burada html ve jquery kodları bulunacak.

resimlerinizi koyabilmeniz için images adında bir klasör oluşturun.

yazımın sonunda resimleri sizlerle paylaşacağım. sizler kendinize uygun resimnler kullanabilirsiniz.

son olarakta css komutları yazacağımız bir css klasörü oluşturun ve içerisinede style.css dosyamızı oluşturun.

her zamanki gibi ilk olarak style.css dosyamızın kodlarını yazarak işe başlayalım.

 

css kod:

 

/* Css Sıfırlama */
body {font: 12px/19px Arial; margin: auto}
table,tr,td,h1,h2,h3,h4,h5,h6,ul,li,input,form,textarea {padding: 0; margin: 0; list-style-type: none; border: none;}
img {border: none;}
a {text-decoration: none;}
:focus {outline: none;}

/* Slider */
#slider_container {height: 275px; background-image: url("../images/morarka.png"); background-repeat: no-repeat}
#slider_alt {height: 140px; background-image: url("../images/slider_alt.jpg"); background-repeat: no-repeat}
.slider_alt {margin-left: 410px;}
.slider_alt li {float:left; padding: 80px 20px 0 0; }
.slider {float: left; margin-top: 50px; margin-left: 30px;}
#once {margin-left: 80px; margin-top: 55px}
#sonra {margin-top: 55px}
#yazi {margin-top: 25px; width: 300px}
#goruntu {width: 289px; height: 180px; overflow: hidden}

 

evet arkadaşlar css dosyamız bu şekilde olacaktır.

 

şimdi ise son olarak index.html dosyamızın kodlarını yazalım.

 

<!DOCTYPE html>
<head>
<title>JQuery ile Slider Yapımı</title>
<link rel="stylesheet" href="css/style.css" />
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript">
var a=0;
$(document).ready(function(){
//açılış ayarlarının yapılması
$(".aciklama li").hide();
$(".aciklama li:eq("+a+")").show();
$("#r0").hide();
$("#r0").attr({src:"images/s_btn2.jpg"});
$("#r0").show();

//geri okuna basılca çalıştır
$("#once").click(function(){
once();
});
//ileri okuna basılca çalıştır
$("#sonra").click(function(){
sonra();
});
//butonlara basılca çalıştır
$(".slider_alt li").click(function(){
var b=$(this).index();
btn(b);
});
});

//geri gitme fonksiyonu
function once(){
$("#r"+a).hide();
$("#r"+a).attr({src:"images/s_btn.jpg"});
$("#r"+a).show();
a--;
if(a<0){a=5};
$("#r"+a).hide();
$("#r"+a).attr({src:"images/s_btn2.jpg"});
$("#r"+a).show();
$(".resim li").hide();
$(".aciklama li").hide();
$(".resim li:eq("+a+")").show();
$(".aciklama li:eq("+a+")").show();
};

//ileri gitme fonksiyonu
function sonra(){
$("#r"+a).hide();
$("#r"+a).attr({src:"images/s_btn.jpg"});
$("#r"+a).show();
a++;
if(a>5){a=0};
$("#r"+a).hide();
$("#r"+a).attr({src:"images/s_btn2.jpg"});
$("#r"+a).show();
$(".resim li").hide();
$(".aciklama li").hide();
$(".resim li:eq("+a+")").show();
$(".aciklama li:eq("+a+")").show();
};

//buton ile slide geçiş fonksiyonu
function btn(b){
$("#r"+a).hide();
$("#r"+a).attr({src:"images/s_btn.jpg"});
$("#r"+a).show();
a=b;
$("#r"+a).hide();
$("#r"+a).attr({src:"images/s_btn2.jpg"});
$("#r"+a).show();
$(".resim li").hide();
$(".aciklama li").hide();
$(".resim li:eq("+a+")").show();
$(".aciklama li:eq("+a+")").show();
};

//her on saniyede, bir sonrakine geç
var int=self.setInterval("sonra()",10000);
</script>
</head>
<body>
<div id="slider_container">
<div class="slider">
<div id="once"><a href="javascript:void(0)"><img src="images/onceki.png" /></a></div>
</div>
<div class="slider">
<div id="yazi">
<ul class="aciklama">
<li>1. resim ile ilgili yazı</li>
<li>2. resim ile ilgili yazı</li>
<li>3. resim ile ilgili yazı</li>
<li>4. resim ile ilgili yazı</li>
<li>5. resim ile ilgili yazı</li>
<li>6. resim ile ilgili yazı</li>
</ul>
</div>
</div>
<div class="slider">
<div id="goruntu">
<ul class="resim">
<li><a href="#"><img src="images/resim1.jpg" /></a></li>
<li><a href="#"><img src="images/resim2.jpg" /></a></li>
<li><a href="#"><img src="images/resim3.jpg" /></a></li>
<li><a href="#"><img src="images/resim4.jpg" /></a></li>
<li><a href="#"><img src="images/resim5.jpg" /></a></li>
<li><a href="#"><img src="images/resim6.jpg" /></a></li>
</ul>
</div>
</div>
<div class="slider">
<div id="sonra"><a href="javascript:void(0)"><img src="images/sonraki.png" /></a></div>
</div>
</div>

<div id="slider_alt"><div class="slider_alt">
<ul>
<li><a href="javascript:void(0)"><img id="r0" src="images/s_btn.jpg" /></a></li>
<li><a href="javascript:void(0)"><img id="r1" src="images/s_btn.jpg" /></a></li>
<li><a href="javascript:void(0)"><img id="r2" src="images/s_btn.jpg" /></a></li>
<li><a href="javascript:void(0)"><img id="r3" src="images/s_btn.jpg" /></a></li>
<li><a href="javascript:void(0)"><img id="r4" src="images/s_btn.jpg" /></a></li>
<li><a href="javascript:void(0)"><img id="r5" src="images/s_btn.jpg" /></a></li>
</ul>
</div></div>
</body>
</html>

 

evet arkadaşlar html kodlarımızıda bu şekilde yazdıktan sonra jquery sliderimiz oluşmuş oldu.

yazımın altında resimleri bulabilirsiniz.

iyi bloglamalar herkese.

jquery ile slider yapımı