Slider Tasarlamak

Bugün bir sitem için basit bir slider tasarladım. Nasıl tasarladığımı sizlerle paylaşıyorum. Bittiğinde şu şekilde görünecek:

Image2

ÇALIŞAN BİR ÖRNEK GÖRMEK İÇİN BURAYA TIKLAYIN

Slider, özellikle haber sitelerinde aşina olduğunuz, görsellerden oluşan bir içerik sunma aracı. Sitelerin ana sayfalarını süsleyen bu sliderların yapımı fazla da zor değil. Kendi sliderınızı tasarlamadan önce şunları bildiğinize emin olun: HTML, CSS, Java Script ve jQuery…

İlk olarak HTML ve CSS ile sliderımızın görünüşünü tasarlayalım.

Slayt 1
Bu slayt 1 için açıklama...

Slayt 2
Bu slayt 2 için açıklama...

Slayt 3
Bu slayt 3 için açıklama...

Slayt 4
Bu slayt 4 için açıklama...

HTML kodunu incelediğimizde üzerinde efekt uygulaması yapacağımız DIV elementlerine id niteliği atadığımız dikkatinizi çekmiştir. Bunların birbirinden farklı olması gereklidir. “slider” stiline sahip DIV elementinde yer verdiğimiz resimler 480×360 boyutundadır. “slider_layer” stilindeki nesnelerin aynı noktadan başlaması önemlidir. Yani aslında bu resimler üst üste binecektir. Sadece görünmesi gereken javascript yardımıyla görünür hale getirilecektir. Bunu yapmamızı sağlayan CSS kodu “position: absolute;”

HTML kodunda gÖrdüğünüz slider_layer ve nav_layer sınıflarına ait divler çoğaltılabilir. Kaç adet slayt bulunacaksa o kadar yapabilirsiniz. Ancak aynı id vermemeye dikkat edin.

Sıra geldi CSS tasarlamaya:

.slider_pad {
	float: left;
	width: 720px;
	border-bottom: 1px #EFEFEF solid;
	padding-bottom: 10px;
	margin-bottom: 10px;
}
.slider {
	float: left;
	width: 480px;
	height: 360px;
	padding-right: 10px;
	border-right: 1px #EFEFEF solid;
}
.slider_layer {
	display: none;
	position: absolute;
	width: 480px;
	height: 360px;
	overflow: hidden;
}
.slider_title {
	position: absolute;
	left: 5px;
	top: 360px;
	width: 480px;
	height: 60px;
	background-image: url('transparan_siyah.png');
}
.slider_title p {
	font-size: 10pt;
	padding: 3px 5px 3px 5px;
	color: #FFFFFF;
}
.slider_title a {
	font-size: 12pt;
	font-weight: bold;
	color: #FFCC19;
}
.navigate {
	float: left;
	width: 170px;
	height: 360px;
	margin-left: 10px;
	overflow-y: scroll;
}
.nav_layer {
	float: left;
	width: 130px;
	padding: 5px;
	margin-bottom: 10px;
	border: 1px #EFEFEF solid;
}

Kodu incelediğimizde slider_pad, tüm sliderımızı kapsayan bir çerçeve, içine “float: left;” ile divler yerleştiriyoruz. Bunların stilleri “slider” ve “navigate” olarak belirledik. “slider” stili resmin bulunduğu ana çerçeve, “navigate” stili ise büyük resmin sağındaki küçük resimler için oluşturduğumuz bir div elementi.

slider içinde iki şey bulunuyor. Biri “slider_layer”, resmin koyulacağı katman, diğeri “slider_title” yazının bulunduğu katman. Bunların başlangıç noktalarını left, top CSS kodları ile belirledik. Hareket etmesini sağlayacak güç jQuery olacak.

navigate içinde sadece “nav_layer” adında küçük resim katmanı bulunuyor. Bunlar liste şeklinde sıralanıyor, 360 pikselden büyük kısımlarının scroll oluşturmasını sağladık. Bunun için kullandığımız kod: “overflow-y: scroll;” css kodu.

HTML ve CSS işimiz bittiğine göre kodlamaya geçelim. Kodlarımız hem javascript hem jquery karışık. jQuery için mutlaka kütüphane dosyasını kullanın (ben jquery-1.10.2.min.js dosyasını kullandım).

Kodumuzu yazalım ve inceleyelim:

window.onload = slaythazirla;
var beklet;
var tiklandi = false;
var siradaki = 0;
var slaytlar = new Array();
var onceki = 0;

function slaythazirla()
{
	for ( var i = 0; i < 10; i++ )
	{
		slayt = document.getElementById( 's' + i );

		if ( slayt != null )
		{
			if ( i == 0 )
			{
				slayt.style.display = 'inline';
				$("#n" + siradaki).css({"border":"1px #9B0909 solid"});
			}

			slaytlar[siradaki] = slayt;

			var slaytRes = document.getElementById( 'n' + i );
			slaytRes.onclick = (function(k) {return function() { slaytsec(k); }; })(siradaki);

			siradaki++;
		}
	}

	siradaki = 0;
	if ( slaytlar.length > 0 )
		beklet = setTimeout( 'slaytgoster();', 500 );
}
function slaytgoster()
{
	if ( tiklandi )
		return;

	onceki = siradaki;
	siradaki = siradaki + 1;
	if ( siradaki >= slaytlar.length )
		siradaki = 0;

	$("#n" + onceki).css({"border":"1px #EFEFEF solid"});
	$("#t" + onceki).animate({top:'360px'},"slow");
	$("#s" + onceki).fadeOut(500);
	$("#s" + siradaki).fadeIn(500);
	$("#t" + siradaki).animate({top:'300px'},"slow");
	$("#n" + siradaki).css({"border":"1px #9B0909 solid"});

	var beklet = setTimeout( 'slaytgoster();', 5000 );
}
function slaytsec( sec )
{
	onceki = siradaki;
	siradaki = sec;

	$("#n" + onceki).css({"border":"1px #EFEFEF solid"});
	$("#t" + onceki).animate({top:'360px'},"slow");
	$("#s" + onceki).fadeOut(500);
	$("#s" + siradaki).fadeIn(500);
	$("#t" + siradaki).animate({top:'300px'},"slow");
	$("#n" + siradaki).css({"border":"1px #9B0909 solid"});

	tiklandi = true;
}

Başlangıçta değişkenlerimizin değerlerini girdik. Burada yer alan:

– beklet, belirli sürelerle resmin değişmesini sağlayan fonksiyon
– tiklandi, eğer sağdaki resimlerden birine tıklanırsa otomatik resim geçişini kapayan sistem için kullanacağımız değişken. Tıklandıysa true olacak, tıklanmazsa false.
– siradaki, otomatik geçişte kaçıncı slaytta olduğuna burada yer vereceğiz.
– slaytlar, bizim için html belgemizdeki tüm slaytları barındıran bir dize.
– önceki, slayt geçişlerinde bir önceki slaytın sönmesi (fadeOut) için gerekli.

“window.onload” ile HTML belgemizin yüklendiği zaman slaythazirla fonksiyonunun çağırılmasını sağladık. Ardından en fazla 10 olmak üzere slaytlarımızı (s0, s1, s2 şeklinde idleri olan divler) dize haline getirdik. Ayrıca aynı fonksiyon içinde sağ taraftaki küçük resimlere tıklandığında slaytsec() fonksiyonunun çalışmasını sağladık.

Slaytları belirledikten sonra beklet = setTimeout( ‘slaytgoster();’, 500 ); ile bir sonraki slayt geçişini ayarladık. Buradaki 500 milisaniye olup resmin daha uzun görünmesi için bunu değiştirebilirsiniz.

Belirtilen sürenin sonunda slaytgoster() devreye girdi. Tıklandıysa bu fonksiyonun görülmemesini return; ile sağladık. Sırasıyla 6 adet jQuery efekti uyguladık.

$(“#n” + onceki).css({“border”:”1px #EFEFEF solid”});
Önceki slaytın kenarlığını kırmızıdan griye çevirdi.

$(“#t” + onceki).animate({top:’360px’},”slow”);
Yazı (slider_title) kutusunun 60 piksel aşağı inmesini sağladı.

$(“#s” + onceki).fadeOut(500);
Eski resmin sönmesini sağladı (500 ms)

$(“#s” + siradaki).fadeIn(500);
Yeni slaytın görünmesini sağladı.

$(“#t” + siradaki).animate({top:’300px’},”slow”);
Yeni slayt yazısının 60 piksel yukarı çıkmasını sağladı.

$(“#n” + siradaki).css({“border”:”1px #9B0909 solid”});
Yeni slaytın küçük resminin kenarlığını kırmızı yaptı.

Ardından yine bir beklet ile belirtilen sürede sonraki slayta geçmesini sağladık.

Ve işte sliderımızın son hali: ÇALIŞAN BİR ÖRNEK GÖRMEK İÇİN BURAYA TIKLAYIN

– Ücretsiz 30 slidera göz atmak için buraya tıklayın.
– Ücretsiz farklı 15 slidera göz atmak için buraya tıklayın.
– Ücretsiz farklı 15 slidera göz atmak için buraya tıklayın.

İnternette daha yüzlerce ücretsiz slider ve nasıl yapıldığı ile ilgili doküman bulabilirsiniz.

Hepinize iyi kodlamalar!