Merhaba etrafta oldukça güzel sliderlar olsada(bu aralar en çok hoşuma giden awkard showcase) işin zevkli tarafı bazı şeyleri kendiniz yapmanız.Hazırlayacağım slider oldukça basit kodlardan oluşacak ve yavaş yavaş geliştireceğiz.Kodlarımızın basit olması ekleyeceğimiz bölümlerin artmasıyla ileride biraz can sıkıcı olacaktır ancak anlaşılırlık tarafından baktığımızda jquery ile yeni tanışmışsanız veya bu konuda pluginlerden öteye gitmemişseniz genel olarak çalışma mantıkları açısından size fikir verecektir.
Daha önceki örneklerimde kullandığım xhtml yapısını bu örneğimde de kullacağım basit bir tasiyici katmanı ve bu katman üzerinde görsel birkaç geliştirme bulunmakta ve bu kısımdaki kodlar örneğimiz için şu aşamada pek önem arz etmemekte.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Xuma Slider</title>
<link rel="stylesheet" type="text/css" media="screen" href="assets/css/reset.css" />
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<link href='http://fonts.googleapis.com/css?family=Convergence' rel='stylesheet' type='text/css'>
<script>
$(function(){
});
</script>
<style>
body {
background:#e3e3e3;
font-family: 'Convergence', sans-serif;
font-size:14px;
}
a{text-decoration:none;color:#222;}
#tasiyici {
display:block;
width:600px;
height:400px;
margin:50px auto;
background:#fff;
padding:10px;
border-radius:5px;
border:1px solid #ccc;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.39);
position: relative;
}
h1 {
font-size:24px;
text-align:center;
margin:50px 0;
}
</style>
</head>
<body>
<h1>Basit Slider</h1>
<div id="tasiyici">
</div>
</body>
</html>
Örneği Gör
Daha sonra resimlerimizi biri liste halinde tasiyici katmanımıza ekleyelim.List stilini kaldırmak için header bölümünde bulunan style kodlarımız arasına;
li {
list-style: none;
}
eklemesini yapalım.
Resimlerimiz bu aşamada alt alta listenecektir.
Resimlerimizi taşıyacak liste elamanına xuma_slider ismini veriyorum.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Xuma Slider</title>
<link rel="stylesheet" type="text/css" media="screen" href="assets/css/reset.css" />
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<link href='http://fonts.googleapis.com/css?family=Convergence' rel='stylesheet' type='text/css'>
<script>
$(function(){
});
</script>
<style>
body {
background:#e3e3e3;
font-family: 'Convergence', sans-serif;
font-size:14px;
}
a{text-decoration:none;color:#222;}
#tasiyici {
display:block;
width:800px;
height:600px;
margin:50px auto;
background:#fff;
padding:10px;
border-radius:5px;
border:1px solid #ccc;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.39);
position: relative;
}
h1 {
font-size:24px;
text-align:center;
margin:50px 0;
}
li {
list-style: none;
}
</style>
</head>
<body>
<h1>Basit Slider</h1>
<div id="tasiyici">
<ul id="xuma_slider">
<li><a href="http://www.behance.net/gallery/Novartis-Reflections-Campaign/329834"><img src="http://behance.vo.llnwd.net/profiles3/96416/projects/329834/964161255975057.jpg"></a></li>
<li><a href="http://www.behance.net/gallery/Novartis-Reflections-Campaign/329834"><img src="http://behance.vo.llnwd.net/profiles3/96416/projects/329834/964161255975076.jpg"></a></li>
<li><a href="http://www.behance.net/gallery/Novartis-Reflections-Campaign/329834"><img src="http://behance.vo.llnwd.net/profiles3/96416/projects/329834/964161255975083.jpg"></a></li>
<li><a href="http://www.behance.net/gallery/Novartis-Reflections-Campaign/329834"><img src="http://behance.vo.llnwd.net/profiles3/96416/projects/329834/964161255975088.jpg"></a></li>
<li><a href="http://www.behance.net/gallery/Novartis-Reflections-Campaign/329834"><img src="http://behance.vo.llnwd.net/profiles3/96416/projects/329834/964161255975101.jpg"></a></li>
<li><a href="http://www.behance.net/gallery/Novartis-Reflections-Campaign/329834"><img src="http://behance.vo.llnwd.net/profiles3/96416/projects/329834/964161255975109.jpg"></a></li>
<li><a href="http://www.behance.net/gallery/Novartis-Reflections-Campaign/329834"><img src="http://behance.vo.llnwd.net/profiles3/96416/projects/329834/964161255975123.jpg"></a></li>
<li><a href="http://www.behance.net/gallery/Novartis-Reflections-Campaign/329834"><img src="http://behance.vo.llnwd.net/profiles3/96416/projects/329834/964161255975129.jpg"></a></li>
</ul>
</div>
</body>
</html>
Örneği Gör
Şimdi resimlerimizi biraz stilize edelim.
ul#xuma_slider {
width:600px;
height:400px;
display: block;
overflow: hidden;
margin:100px auto;
border:2px solid #ccc;
padding:0;
}
ul#xuma_slider li {
display:none;
}
ul#xuma_slider li:first-child{
display: block;
}
Liste elemanımızın boyutunu resimlerimizin boyutuyla aynı veriyorum.Overflow ifademiz gereğince liste elemanlarını gizlemesekte ilk elemandan sonrası görünmeyecektir.Ancak biz tüm liste elemanlarını gizledikten sonra first-child ile ilk elemanı gösterelim.
Sonrasında html tarafında ilk liste elamanına aktif class’ını atıyorum.Bunu aktif resmi göstereceğim bir taşıyıcı kelime olarak kullanacağım.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Xuma Slider</title>
<link rel="stylesheet" type="text/css" media="screen" href="assets/css/reset.css" />
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<link href='http://fonts.googleapis.com/css?family=Convergence' rel='stylesheet' type='text/css'>
<script>
$(function(){
});
</script>
<style>
body {
background:#e3e3e3;
font-family: 'Convergence', sans-serif;
font-size:14px;
}
a{text-decoration:none;color:#222;}
#tasiyici {
display:block;
width:800px;
height:600px;
margin:50px auto;
background:#fff;
padding:10px;
border-radius:5px;
border:1px solid #ccc;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.39);
position: relative;
}
h1 {
font-size:24px;
text-align:center;
margin:50px 0;
}
li {
list-style: none;
}
ul#xuma_slider {
width:600px;
height:400px;
display: block;
overflow: hidden;
margin:100px auto;
border:2px solid #ccc;
padding:0;
}
ul#xuma_slider li {
display:none;
}
ul#xuma_slider li:first-child{
display: block;
}
</style>
</head>
<body>
<h1>Basit Slider</h1>
<div id="tasiyici">
<ul id="xuma_slider">
<li class="aktif"><a href="http://www.behance.net/gallery/Novartis-Reflections-Campaign/329834"><img src="http://behance.vo.llnwd.net/profiles3/96416/projects/329834/964161255975057.jpg"></a></li>
<li><a href="http://www.behance.net/gallery/Novartis-Reflections-Campaign/329834"><img src="http://behance.vo.llnwd.net/profiles3/96416/projects/329834/964161255975076.jpg"></a></li>
<li><a href="http://www.behance.net/gallery/Novartis-Reflections-Campaign/329834"><img src="http://behance.vo.llnwd.net/profiles3/96416/projects/329834/964161255975083.jpg"></a></li>
<li><a href="http://www.behance.net/gallery/Novartis-Reflections-Campaign/329834"><img src="http://behance.vo.llnwd.net/profiles3/96416/projects/329834/964161255975088.jpg"></a></li>
<li><a href="http://www.behance.net/gallery/Novartis-Reflections-Campaign/329834"><img src="http://behance.vo.llnwd.net/profiles3/96416/projects/329834/964161255975101.jpg"></a></li>
<li><a href="http://www.behance.net/gallery/Novartis-Reflections-Campaign/329834"><img src="http://behance.vo.llnwd.net/profiles3/96416/projects/329834/964161255975109.jpg"></a></li>
<li><a href="http://www.behance.net/gallery/Novartis-Reflections-Campaign/329834"><img src="http://behance.vo.llnwd.net/profiles3/96416/projects/329834/964161255975123.jpg"></a></li>
<li><a href="http://www.behance.net/gallery/Novartis-Reflections-Campaign/329834"><img src="http://behance.vo.llnwd.net/profiles3/96416/projects/329834/964161255975129.jpg"></a></li>
</ul>
</div>
</body>
</html>
Örneği Gör
Şimdi resimlerimizi hareket ettireceğimiz ok tuşlarını yerleştirelim.Bunun için taşıyıcı katmanına iki adet link ekliyorum.
<div id="tasiyici"> <ul id="xuma_slider"> <li class="aktif"><a href="http://www.behance.net/gallery/Novartis-Reflections-Campaign/329834"><img src="http://behance.vo.llnwd.net/profiles3/96416/projects/329834/964161255975057.jpg"></a></li> <li><a href="http://www.behance.net/gallery/Novartis-Reflections-Campaign/329834"><img src="http://behance.vo.llnwd.net/profiles3/96416/projects/329834/964161255975076.jpg"></a></li> <li><a href="http://www.behance.net/gallery/Novartis-Reflections-Campaign/329834"><img src="http://behance.vo.llnwd.net/profiles3/96416/projects/329834/964161255975083.jpg"></a></li> <li><a href="http://www.behance.net/gallery/Novartis-Reflections-Campaign/329834"><img src="http://behance.vo.llnwd.net/profiles3/96416/projects/329834/964161255975088.jpg"></a></li> <li><a href="http://www.behance.net/gallery/Novartis-Reflections-Campaign/329834"><img src="http://behance.vo.llnwd.net/profiles3/96416/projects/329834/964161255975101.jpg"></a></li> <li><a href="http://www.behance.net/gallery/Novartis-Reflections-Campaign/329834"><img src="http://behance.vo.llnwd.net/profiles3/96416/projects/329834/964161255975109.jpg"></a></li> <li><a href="http://www.behance.net/gallery/Novartis-Reflections-Campaign/329834"><img src="http://behance.vo.llnwd.net/profiles3/96416/projects/329834/964161255975123.jpg"></a></li> <li><a href="http://www.behance.net/gallery/Novartis-Reflections-Campaign/329834"><img src="http://behance.vo.llnwd.net/profiles3/96416/projects/329834/964161255975129.jpg"></a></li> </ul> <a href="#" id="ileri">İleri</a> <a href="#" id="geri">Geri</a> </div>
Linklerimden birisi ileri diğeri geri idsine sahip.Şimdi bu linklerimizi biraz görsellik katalım.
a#ileri,a#geri{
position: absolute;
top:50%;
margin-top:-15px;
width:33px;height:33px;
display: block;
background: url("oklar.png") 0 0 no-repeat;
text-indent: -9999px;
}
a#ileri {
right:10px;
background-position:-34px 0px;
}
a#geri {
left:10px;
}
a#ileri:hover{
background-position:-34px -34px;
}
a#geri:hover{
background-position:0 -34px;
}
Örneği Gör
Böylelikle bu aşamadaki xhtml/css kısmı bitirmiş olduk ve şimdi jquery tarafına geçelim.Jquery kısmında sliderımızı asıl oluşturacak olaylar ileri ve geri linklerine tıklanması.Bu yüzden bu olaylar için kodlarımızı yazmaya başlayalım.
$('#ileri').click(function(){
});
$('#geri').click(function(){
});
gördüğünüz gibi basit şekilde ileri ver geri olaylarımız için birer fonksiyon oluşturduk.İleri fonksiyonumuz üzerinden devam edelim.İlk olarak aktif resmin hangisi olduğunu ve slider’da kaç resim olduğunu bulmam gerek.
var aktif = $('ul#xuma_slider li.aktif').index();
var boyut = $('ul#xuma_slider li').size();
index() ifademizle liste elamanı li’nin o liste içinde kaçıncı sırada olduğunu buluruz.Ancak burada dikkat edilmesi gereken husus bu sıranın 0 dan başlamasıdır.Size() fonksiyonu ile tüm liste elemanlarının sayısını alırız.
Peki bunlara neden ihtiyacımız var ? Bu değerlere listemizin sonuna gelip gelmediğimizi öğrenmek ve geri gidiyorsak 1. resimden önceki elamanın index numarasına sahip olmak için ihtiyacımız var.Şimdi bu kontrolleri yaparak devam edelim.
$('#ileri').click(function(){
var aktif = $('ul#xuma_slider li.aktif').index();
var boyut = $('ul#xuma_slider li').size();
if((aktif+1)==boyut){
}else{
}
return false;
});
Yukarıda eklemiş olduğumuz kısım basit olarak aktiften sonraki resmin sonuncu resim olması durumunu için özel tanımlar yapar eğer durum öyle değilse normal koşullarda devam eder.Return false ifademiz ise linkerimize tıklandığında sayfanın yukarı çıkmasını engeller.Bunu ifadeyi kaldırarak test edebilirsiniz.
Else kısmında yani sonuncuya ulaşmadan önce gerçekleştireceğimiz rutin işlemlere bakalım.
İlk olarak aktif class’ının tıklanan elementten kaldıralım ve elemanımızı gizleyelim.
$('ul.#xuma_slider li.aktif').removeClass('aktif').hide();
sonrasında aktif olarak index numarasını aldığımız elementin bir fazlası olan elemente aktif class’ını ekleyelim ve bu elementi gösterelim.
$('ul.#xuma_slider li').eq(aktif + 1).addClass('aktif').show();
gördüğünüz gibi jquery ile chain işlemler yapabilemekteyiz.removeClass ile classı kaldırırken hide() ile elemanımızı gizliyoruz.
Sonrasında ise aktiften sonraki elemanı bulmak için .eq() fonsiyonunu kullanıyoruz.Bu fonksiyon o sette bulunan elemanın indisini bulmamıza veya o elamanı seçmemize yarar eq(aktif + 1) ifadesi ile aktif classına sahip elamandan sonraki elamanı seçeceğimizi belirttik.İlk elemanımızdan örnek verirsek bu elemanımıza ait aktif değeri 0 yani 0. elamandır bir sonrakini seçmek için 1 ekleyerek 1. elemana ulaşıyoruz.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Xuma Slider</title>
<link rel="stylesheet" type="text/css" media="screen" href="assets/css/reset.css" />
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<link href='http://fonts.googleapis.com/css?family=Convergence' rel='stylesheet' type='text/css'>
<script>
$(function(){
$('#ileri').click(function(){
var aktif = $('ul#xuma_slider li.aktif').index();
var boyut = $('ul#xuma_slider li').size();
if(aktif==boyut){
}else{
$('ul#xuma_slider li.aktif').removeClass('aktif').hide();
$('ul#xuma_slider li').eq(aktif + 1).addClass('aktif').show();
}
return false;
});
$('#geri').click(function(){
});
});
</script>
<style>
body {
background:#e3e3e3;
font-family: 'Convergence', sans-serif;
font-size:14px;
}
a{text-decoration:none;color:#222;}
#tasiyici {
display:block;
width:800px;
height:600px;
margin:50px auto;
background:#fff;
padding:10px;
border-radius:5px;
border:1px solid #ccc;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.39);
position: relative;
}
h1 {
font-size:24px;
text-align:center;
margin:50px 0;
}
li {
list-style: none;
}
ul#xuma_slider {
width:600px;
height:400px;
display: block;
overflow: hidden;
margin:100px auto;
border:2px solid #ccc;
padding:0;
}
ul#xuma_slider li {
display:none;
}
ul#xuma_slider li:first-child{
display: block;
}
a#ileri,a#geri{
position: absolute;
top:50%;
margin-top:-15px;
width:33px;height:33px;
display: block;
background: url("oklar.png") 0 0 no-repeat;
text-indent: -9999px;
}
a#ileri {
right:10px;
background-position:-34px 0px;
}
a#geri {
left:10px;
}
a#ileri:hover{
background-position:-34px -34px;
}
a#geri:hover{
background-position:0 -34px;
}
</style>
</head>
<body>
<h1>Basit Slider</h1>
<div id="tasiyici">
<ul id="xuma_slider">
<li class="aktif"><a href="http://www.behance.net/gallery/Novartis-Reflections-Campaign/329834"><img src="http://behance.vo.llnwd.net/profiles3/96416/projects/329834/964161255975057.jpg"></a></li>
<li><a href="http://www.behance.net/gallery/Novartis-Reflections-Campaign/329834"><img src="http://behance.vo.llnwd.net/profiles3/96416/projects/329834/964161255975076.jpg"></a></li>
<li><a href="http://www.behance.net/gallery/Novartis-Reflections-Campaign/329834"><img src="http://behance.vo.llnwd.net/profiles3/96416/projects/329834/964161255975083.jpg"></a></li>
<li><a href="http://www.behance.net/gallery/Novartis-Reflections-Campaign/329834"><img src="http://behance.vo.llnwd.net/profiles3/96416/projects/329834/964161255975088.jpg"></a></li>
<li><a href="http://www.behance.net/gallery/Novartis-Reflections-Campaign/329834"><img src="http://behance.vo.llnwd.net/profiles3/96416/projects/329834/964161255975101.jpg"></a></li>
<li><a href="http://www.behance.net/gallery/Novartis-Reflections-Campaign/329834"><img src="http://behance.vo.llnwd.net/profiles3/96416/projects/329834/964161255975109.jpg"></a></li>
<li><a href="http://www.behance.net/gallery/Novartis-Reflections-Campaign/329834"><img src="http://behance.vo.llnwd.net/profiles3/96416/projects/329834/964161255975123.jpg"></a></li>
<li><a href="http://www.behance.net/gallery/Novartis-Reflections-Campaign/329834"><img src="http://behance.vo.llnwd.net/profiles3/96416/projects/329834/964161255975129.jpg"></a></li>
</ul>
<a href="#" id="ileri">İleri</a>
<a href="#" id="geri">Geri</a>
</div>
</body>
</html>
Bu haliyle test ettiğimizde ileri fonksiyonumuzun çalıştığını göreceksiniz ancak son elemandan sonra boş bir ekranla karşılaşmaktayız ki zaten bu yüzden if yapısını kullandık.
if((aktif+1)==boyut){
$('ul#xuma_slider li.aktif').removeClass('aktif').hide();
$('ul#xuma_slider li:first-child').addClass('aktif').show();
}
if yapımızıda bu şekilde oluşturduktan sonra artık iler doğru giden ve sona geldiğinde başa dönene bir yapımız var.Artık geri işlemine geçebiliriz.
Geri gitme işlemi ileriden mantık olarak çok farklı değil.Geri linkine tıkladığımızda bir önceki elamana aktif classı eklerken tıklanan elemandan kaldıracak.Buradaki istisna durumumuz ise ilk resme geldiğimizde sonuncu resme gitme olayı.Kodlarımızı yazarak inceleyelim.
$('#geri').click(function () {
var aktif = $('ul#xuma_slider li.aktif').index();
var boyut = $('ul#xuma_slider li').size();
if (aktif == 0) {
$('ul#xuma_slider li.aktif').removeClass('aktif').hide();
$('ul#xuma_slider li').eq(boyut - 1).addClass('aktif').show();
} else {
$('ul#xuma_slider li.aktif').removeClass('aktif').hide();
$('ul#xuma_slider li').eq(aktif - 1).addClass('aktif').show();
}
return false;
});
Burada aktif class’ımız 0 değerini yani ilk elemana ulaşmışsa $(‘ul#xuma_slider li’).eq(boyut – 1) ifadesi ile sonuncu elemanı seçiyoruz.Burda boyut-1 dememizin nedeni eq ifadesinin 0′dan başlaması.Örnek vermek gerekirse 4 elamana sahip bir listede boyut ifademiz 4 olurken sonuncu eleman olan 4. liste elemanın index() veya seçici olarak eq() ifadesi 3 olacaktır.
Else kısmı ise yine ileridekine benzer şekilde ancak artık aktifden bir önceki elemanı seçmekte.
Artık ileri geri istediğimiz gibi gidebileceğimiz bir slidera sahibiz
Örneği Gör
Şimdi ufak bir görse güncelleme daha yapalım.
$('#ileri,#geri').click(function () {
$('html, body').stop().animate({
scrollTop: $("#xuma_slider").offset().top
}, 2000);
});
Artık sliderımız kullanılabilir halde ama birde numaralar olsa istiyorsak ne yaparız.Şimdi o kısma başlayalım.
Tasiyici katmanımız içerisine sayfalama adlı bir katman oluşturalım ve içerisine boş bir liste elementi yerleştirelim.
<div id="sayfalama"><ul></ul></div>
Biraz stilize edelim.
#sayfalama ul{
border:1px solid #ccc;
width:500px;
height:40px;
display: block;
background: #e3e3e3;
margin:0 auto;
}
#sayfalama li a{
float:left;
display: block;
background: #f5f5f5;
border:1px solid #CCCCCC;
padding:5px;
margin-left:5px;
margin-top:5px;
}
Şimdi otomatik olarak linklerimizi oluşturalım ve ayrıntılarına şuan giremeyeceğim otomatik oluşturulan elementlerde tıklanma problemi için tıklanma olayını linklerimizi oluştururken atayalım.
var liste=$('ul#xuma_slider li').size();
for(i=1;i<=liste;i++){
$('#sayfalama ul').append("<li><a href='#' id='resim_"+i+"'>"+i+"</a></li>");
$('#sayfalama a#resim_'+i).click(resim_goster);
}
function resim_goster(){
var resimID=$(this).attr('id').split('_');
$('#xuma_slider li').removeClass('aktif').hide();
$('#xuma_slider li').eq(resimID[1]-1).addClass('aktif').show();
return false;
}
resim_goster() fonksiyonu basit olarak tıklanan resmin id’sini alır ve split() fonksiyonu ile parçalar böylece resmin id’sini alırız.Sonrasında tüm liste elemanlarını gizler ve aktif classını kaldırırız.Kaldırmadığımız taktirde ileri geri tıklamalarımızda aktif classı neredeyse orada kalır ve tıkladığımız resim numarasından devam etmez.Sonrasında tıklalan resmi eq() ifadesi ile seçip aktif classı ekledikten sonra gösteriyoruz.
Örneği Gör
Copyright © Hakan ERSU.All rights reserved