Kirli Kirpi Blog

Bize, sektöre ve hayata dair söylemek istediklerimiz var. Peki siz bunları dinlemek ve okumak ister misiniz?

#Responsive Slider Hazırlamak
responsive-slider-cover

 

Web tasarımında, slider alanı hazırlamak ve responsive slider kullanımı; yazılımcıların da, web tasarımıncıların da en zorlandığı konulardan biridir. Geçmişte bu konudaki sıkıntılardan dolayı kendim kullanmak için geliştirdiğim sonrasında gerekli olan projelerde eklemeler yaparak geliştirmeye devam ettiğim slider eklentisi içeriğiyle ilgili detaylı bilgi aktarmaya çalışacağım. Tabi ki şu an yeni bir slider eklentisine ihtiyacımız yok ancak buradaki amaç yeni bir slider eklentisinden ziyade, bir jquery eklentisi nasıl yazılır anlamak ve bu sayede jquery dünyasının bir kısmını daha iyi öğrenmeye çalışmak.

Eklentinin çalışır halini http://kirlikirpi.com/tools/slider adresinden görebilirsiniz.

Not: Eklentinin açıklamaları js dosyasında mevcut oradan da yararlanabilirsiniz.

 

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
	<link type="text/css" rel="stylesheet" href="slider.css" media="all" />
</head>
<body>
	<div class="slider-box" not=".text-container">
		<img class="fSlide" src="img1.jpg" />
		<img class="fSlide" src="img2.jpg" />
		<div class="text-container">
			<p class="text-item">Kirli Kirpi Web</p>
			<p class="text-item">Kirli Kirpi</p>
		</div>
	</div>
	<script src="jquery-1.10.2.min.js"></script>
	<script src="jquery.easing.1.3.js"></script>
	<script src="slider.js"></script>
	<script src="script.js"></script>
</body>
</html>

Öncelikle html kodlarımızı yazıyoruz. Gerekli olan jquery, jquery ease, içine slider kodlarını yazacağımız slider.js, sliderı çağıracağımız scrpit.js ve slider.css dosyalarını sayfaya ekliyoruz.
Slider için bir slider kutusu tanımlayıp içine resimleri ekliyoruz. Tabi buraya slideolarak div koyup onun içini birden fazla element doldurabiliriz. Eğer içinde slide olarak değerlendirmesini istemedeğimiz bir element var sliderın “not” özelliğine bu elementi yazıyoruz.

.slider-box{
	position:relative;
	overflow:hidden;
}
.slider-box > .fSlide
{
	width:100%;
	display:inline-block;
	background-repeat:no-repeat;
	background-position:center;
	position:absolute;
}

Hiçbir navigasyonu olmayan düz bir slider için yukarıdaki kodlar yeterli. Yani sliderın hareketine izin verecek stil atamaları bu şekilde.

 

.slidesNavigateUl
{
	float: right;
	list-style: none;
	position: absolute;
	z-index: 15;
	top:3%;
	right: 2%;
}
.slidesNavigateLi
{
	float: left;
	margin-left:7px;
	cursor:pointer;
}
.slidesNavigateUl li a
{
	display: block;
	width:13px;
	height:13px;
	border-radius:50%;
	background-color:#f9953d;
	float: left;
}
.slidesNavigateUl li a:hover {
	background-color:#e9852d;
}
.slidesNavigateUl li a.active, .slidesNavigateUl li a:hover.active
{
	background-color:#e9852d;
}
.sNext, .sPrev {
	position:absolute;
	width:5%;
	height:25%;
	background-color:#ff7700;
	top:0px;
	bottom:0px;
	margin-top:auto;
	margin-bottom:auto;
	z-index:25;
}
.sNext:hover, .sPrev:hover {
	background-color:#ff8800;
}
.sNext
{
	right:0px;
}
.sPrev
{
	left:0px;
}
.text-container{
	position:absolute;
	bottom:-100%;
	left:5%;
	width:50%;
	height:100%;
	z-index:30;
}
.text-item{
	font-family:Tahoma;
	position:absolute;
	font-size:5vw;
	color:#eee;
	text-shadow:0px 0px 5px #aaa;
}

Navigasyon, yazı ve diğer element özellikleri için bu satırları ekliyoruz. Asıl buradaki olay eklenti olduğu için html ve css kısımlarını hızlı geçiyorum.

 

(function ($) { 
    $.fn.slider = function (options) { 

    }
} (jQuery));

Standart jquery plugin kalıbı. “fn.” kısmından sonra yazdığımızla istediğimz yerde bu fonksiyonu çağıracağız. Tüm kodumuz bu fonksiyonun içinde yer alacak.

Options kısmını dışarıdan gelen parametreleri alabilmek için tanımladık

 

var defaults = { 
	delay: 8000, 
	speed: 800,
	directionNav : true,
	iconNav: true,
	slideType: 'fade',
	easeType: 'linear', //
	start: function () { }, 
	animBegin: function () { },
	animComplete: function () { },
	resize: function () { }
};

 

Burada default değerlerimiz yer alıyor. delay gecikmeyi, speed slide geçiş hızını, directionNav ve iconNav navigasyon linklerinin gelip gelmeyeceğini, slideType animasyon tipini(biz üç tane yapıcaz) tutuyor. Start slider başladığında yapılacak işlemleri, animBegin her animasyon başladığında yapılacak işlemleri, animComplete her animasyon bitişinde yapılacak işlemleri, resize sayfa yeniden boyutlandığında yapılacak işlemleri tutuyor.
Eastypeda http://jqueryui.com/resources/demos/effect/easing.html bulunanlarda herhangi birinin adı tanımlanabilir. Bu özellik bize jquery.easing kütüphanesi ile geliyor.

 

return this.each(function () { 
});

Eğer eklentinin çalıştırılmak istendiği elementten birden fazla , o kadar döner her biri için ayrı olarak kodu türetir. Geri kalan kodlamalarımızı bu döngünün içinde yazacağız.

 

var settings = $.extend({}, defaults, options);

Burada default değerlerimizle optionsdan gelen değirlerimiz birleştiriliyor eğer optionsdan değer geliyorsa defaultdan gelen değer iptal oluyor ve ortaya çıkan sonuç settingse aktarılıyor. Kodlarımızda “settings.delay” şeklide gönderdiğimiz parametreleri kullanacağız.

 

 

var ctr = $(this), //ilgili sayfa nesnemizi değişkene atıyoruz
slideWidth, // horizontal animasyonda kullanacağımız slider genişliği
slideHeight, // vertical animasyonda kullanacağımız slider yüksekliği
slideLength, // slide miktarını atayacağımız değişken
spnIndex = 0, //yeni index olarak kullanacağımız index
spnIndexEx = 0, //eski index olarak kullanacağımız index
timer, // zamanlayıcı atayacağımız değişken. burada tanımlamamın sebebi, gerektiği yerde clearinterval fonksiyonuyla zamanlayıcıyı durdurmak
yon = 1, // slider yönü
notElement, // slider içine atıp slide olarak değerlendirilmesini istemediğimiz elementi atayacağımız değişken
fSlideList, // slidelerı atayacağımız değişken
navigatAble = true; //slide değişim anında tkrar değişim yapılmaması için kullanılan değişken

Değişkenlerimizi tanımlıyoruz.  değişkenlerle ilgili açıklamaları hemen yanlarında açıklama satırı olarak belirttim.

 

function slideHorizontal(prIndex, hiz) {
	settings.animBegin(prIndex, spnIndexEx); //animasyon başlangıcında çalışcak değişken fonksiyon çağırılıyor.
	fSlideList.eq(prIndex).css('left', yon * slideWidth); // ekrana gelmesi istenilen resmin pozisyonu yön değerine göre sağa veya sola atılıyor
	fSlideList.eq(spnIndexEx).animate({ left: yon * -slideWidth }, { duration: hiz, easing: settings.easeType, complete: function () {
		NavigateAddClass();
	}
	});//ekrandan gitmesi istenen slide belirlenen yone göre gönderiliyor. bitiminde de NavigateAddClass çalıştırılıyor
	fSlideList.eq(prIndex).animate({ left: 0 }, { duration: hiz, easing: settings.easeType, complete: function () {
		NavigateAddClass();
		navigateStop();
		settings.animComplete(prIndex, spnIndexEx); //animasyon bitişinde çalışcak değişken fonksiyon çağırılıyor.
	}
	}); //ekrana gelmesi istenen slideın animasyonu yapılıyor. bitiminde de animComplete değişken fonksiyonu çağırılıyor.
}
function slideVertical(prIndex, hiz) { //yatay slide ın dikey versiyonu
	settings.animBegin(prIndex, spnIndexEx); //animasyon başlangıcında çalışcak değişken fonksiyon çağırılıyor.
	fSlideList.eq(prIndex).css('top', yon * slideHeight); // ekrana gelmesi istenilen resmin pozisyonu yön değerine göre yukarı veya aşağı atılıyor
	fSlideList.eq(spnIndexEx).animate({ top: yon * -slideHeight }, { duration: hiz, easing: settings.easeType, complete: function () {
		NavigateAddClass();
		navigateStop();
	}
	});
	fSlideList.eq(prIndex).animate({ top: 0 }, { duration: hiz, easing: settings.easeType, complete: function () {
		NavigateAddClass();
		navigateStop();
		settings.animComplete(prIndex, spnIndexEx); //animasyon bitişinde çalışcak değişken fonksiyon çağırılıyor.
	}
	});
}
function slideFade(prIndex, hiz) { // 
	settings.animBegin(prIndex, spnIndexEx); //animasyon başlangıcında çalışcak değişken fonksiyon çağırılıyor.
	fSlideList.eq(prIndex).css('opacity', '1');
	fSlideList.eq(spnIndexEx).animate({ opacity: 0 }, { //buradaki animasyonda lokasyon değiştirmek yerine olduğu yerde opacitysi, devamında z-indexini değiştiriliyor
		duration: hiz, easing: settings.easeType, complete: function () {
			$(this).css({ 'z-index': '13' });
			fSlideList.eq(prIndex).css({ 'z-index': '15' });
			NavigateAddClass();
			navigateStop();
			settings.animComplete(prIndex, spnIndexEx); //animasyon bitişinde çalışcak değişken fonksiyon çağırılıyor.
		}
	});
}

slideHorizontal, slideVertical, slideFade adında üç farklı fonksiyon oluşturuyoruz. buralara sıradaki slideın indexini ve hiz değişkenini parametre olarak tanımlıyoruz bu fonksiyonları kullanacağımız zaman bu parametreleri göndereceğiz. Yatay ve dikey animasyon fonksiyonları yapı olarak birbirine benziyor. Sıradaki slide geleceği yöne atıyoruz sonrada çağırıyoruz.  Fade fonksiyonunda ise opacity yi kullanıyoruz pozisyon değiştirmek yerine z-index kullanıyoruz ki görünen katman en üste gelsin.

 

function AnimateSlide(prIndex, hiz) { 
	if (settings.slideType == 'horizontal') {
		slideHorizontal(prIndex, hiz);
	}
	else if (settings.slideType == 'vertical') {
		slideVertical(prIndex, hiz)
	}
	else if (settings.slideType == 'fade') {
		slideFade(prIndex, hiz)
	}
	spnIndexEx = prIndex;
}

Slide tipimize göre animasyon fonksiyonumuzu çağırıyoruz. Yeni gelen slideın indexini işlemi bittiğinde spnindexex değişkenine atıyoruz.

 

function AddNavigate(){ 
	if(settings.iconNav){
		ctr.append("<ul class='slidesNavigateUl'></ul>");
		for(i = 0; i < slideLength; i++){
			ctr.find("ul").append("<li class='slidesNavigateLi'><a class=''></a></li>");
		}			
	}
	ctr.find('.slidesNavigateUl .slidesNavigateLi').click(function () { 
		if (navigatAble) {
			navigatAble = false;
			spnIndex = ctr.find('.slidesNavigateUl .slidesNavigateLi').index(this); // tıklanan linkin indexi
			if (spnIndex != spnIndexEx) {
				if (spnIndex < spnIndexEx) yon = -1;
				if (spnIndex > spnIndexEx) yon = 1;
				AnimateSlide(spnIndex, settings.speed);
				clearInterval(timer); // slide değiştirildiğinde navigasyon sıfırlanıyor ve tekrar başlatılıyor.
				timer = setInterval(function () {
					TimerFunction();
				}, settings.delay);
			}
		}
	});		
	if(settings.directionNav){
		ctr.append("<a href='#' class='sNext'></a><a href='#' class='sPrev'></a>");
	}
	ctr.find('.sNext').click(function () {
		if (navigatAble) {
			navigatAble = false;
			if (spnIndex == slideLength - 1) //eğer sona gelindiyse
				spnIndex = 0; // başa dön
			else // son slidea gelinmediyse
				spnIndex++; //artır
			yon = 1; //sağa gittiği belirtiliyor.
			NavigateAddClass();
			AnimateSlide(spnIndex, settings.speed);
			clearInterval(timer); // timer zamanlayıcısı siliniyor.
			timer = setInterval(function () {
				TimerFunction();
			}, settings.delay);
		}
		return false;
	});
	ctr.find('.sPrev').click(function () { //geriye tıklandığında
		if (navigatAble) {
			navigatAble = false;
			if (spnIndex == 0)
				spnIndex = slideLength - 1;
			else
				spnIndex--;
			yon = -1;
			NavigateAddClass();
			AnimateSlide(spnIndex, settings.speed);
			clearInterval(timer);
			timer = setInterval(function () {
				TimerFunction();
			}, settings.delay);
		}
		return false;
	});
	NavigateAddClass(); // ilk icon active classı ekliyor
}

Verilen izne göre sayfaya navigasyon öğelerini ekleyen fonksiyon.
Eğer settings.iconNav true değerdeyse ne kadar resim varsa o kadar navigasyon ikonu üretiliyor. İkonların click olayının ikon eklenme izninin dışında tutulmasının sebebi, ikon manuel olarak eklendiğinde de click olay ataması yapılabilmesi.
Eğer settings.directionNav true değerdeyse yön navigasyonları slidera ekleniyor. Sonrasında olay ataması yapılıyor. Eğer navigatAble true değerdeyse yani o anda devam eden bir animasyon yoksa animasyonumuz çalışıyor. Alınan index AnimateSlide fonksiyonuna gönderiliyor ve verilen paramtreye göre animasyonumuz işliyor. Zamanlayıcı sıfırlanıyor.

 

function TimerFunction() {
	if (spnIndex == slideLength - 1)
		spnIndex = 0;
	else
		spnIndex++;
	if (spnIndex < spnIndexEx) direction = -1;
	if (spnIndex > spnIndexEx) { direction = 1; };
	AnimateSlide(spnIndex, settings.speed);
}

Zamanlayıcı içinde çağırdığımız fonksiyon. spnIndex değişkenini her döndüğünde bir artırıyor eğer son slidea gelmişse değişkeni sıfırlıyor ve animasyon fonksiyonunu çağırıyor.

 

$(window).resize(function () { //sayfa yeniden boyutlandırıldığında resize() fonksiyonunu çağırıyor.
	resize(); 
});

Resize olayında “resize()” fonksiyonunu çalıştırarak sayfa her yeniden boyutlandığında resize fonksiyonunu çağırmış oluyoruz.

 

function resize() { 
	var hgt = ctr.find("img").eq(0).height(); 
	ctr.height(hgt);
	slideWidth = ctr.width();
	slideHeight = ctr.height();
	settings.resize();
}

Sayfa yeniden boyutlandığında çalışan fonksiyon. Sliderın boyutunu tarayıcı boyutuna göre düzenliyor. “settings.resize” ile de eğer resize parametresine bir fonksiyon gönderdiysek o çalışıyor.

 

function NavigateAddClass() {
	ctr.find('.slidesNavigateUl .slidesNavigateLi a').removeClass('active');
	ctr.find('.slidesNavigateUl .slidesNavigateLi').eq(spnIndex).find('a').addClass('active');
}

navigasyon ikonlarının aktif pasifliğinin düzenlendiği fonksiyon

 

function navigateStop() { //navigasyon ikonlarını animasyon bittikten sonra tıklanabilir fonksiyon
	navigatAble = true;
}

Animasyon bittiğinde çağırdığımız fonksiyon. navigatAble değeri true yapılarak o an devam eden bir animasyon olmadığı belirtiliyor.

 

$(document).ready(function () { // sayfa yüklendiğinde çalışacak işlemler burada yapılıyor
	notElement = ctr.attr("not");
	fSlideList = ctr.children().not($(notElement));
	if (settings.slideType == 'horizontal') {
		fSlideList.css('left', '100%')
		fSlideList.css('top', '0')
		fSlideList.eq(spnIndex).css('left', '0px');
	}
	else if (settings.slideType == 'vertical') {
		fSlideList.css('left', '0')
		fSlideList.css('top', '100%')
		fSlideList.eq(spnIndex).css('top', '0px');
	}
	else if (settings.slideType == 'fade') { 
		fSlideList.css({ 'opacity': '0', 'top': '0', 'left': '0' });
		fSlideList.eq(spnIndex).css({ 'opacity': '1', 'z-index': '15' });
	}
	slideLength = fSlideList.length;
	slideWidth = ctr.width();
	slideHeight = ctr.height();
	if(slideLength > 1) { AddNavigate(); }
	settings.start(); // eğer parametre gönderdiysek gönderdiğimiz parametreyi çlaışltırıyoruz;
	$(window).load(function () { //sayfa yüklendiğinde zamanlayıcıyı başlatan slider yüksekliğini ayarlayan fonksiyon
		resize();
		timer = setInterval(function () {
			if(slideLength > 1) { TimerFunction(); }
		}, settings.delay);
	});
});

Sayfanın domu yüklendiğinde çalışacak fonksiyon.
Sliderın “not” özelliğine yazılmış elementi notElement değişkenine atıyoruz. Belirlenen slide tipine göre slide düzenlemelerini yapıyoruz. Mantık olarak önce tüm slideları görünmez ya da slider dışında yapıyoruz sonra da ilk slideı görünür yapıyoruz.
Değişken atamalarımız yapıyoruz. Slide sayımızı yüksekliği genişliği atıyoruz.
settings.start( ) kodu ile start parametresinden gelen fonksiyonunu çalıştırıyoruz.
load fonksiyonumuzda sayfa yüklendiğinde zamanlayıcı başlatıyoruz ve resize fonksiyonunu çağırıyoruz.

Slider eklenti kodumuz bu kadar. Şimdi de nasıl çağıracağımıza bakalım.

 

$('.slider-box').slider({
	delay: 4000,
	speed: 600,
	slideType: 'fade', //girilebilecek değerler: 'horizontal', 'vertical', 'fade'
	easeType: 'easeInQuint',
	directionNav : true,
	iconNav: true,
	start: function () {
		$(".text-item").eq(0).animate({ bottom: "105%" }, 600);
	},
	animBegin: function (number, oldNumber) {
		$(".text-item").eq(number).animate({ bottom: "105%" }, 600);
		$(".text-item").eq(oldNumber).animate({ bottom: "0" }, 600);
	},
	animComplete: function (number) {
	},
	resize: function () {
		$(".text-item").css("z-index", "1");
	}
});

$(‘.slider-box’).slider() şeklinde slider ekletisini çağırıyoruz. Parametreleri parantez içine yazarak gönderiyoruz. Start, animBegin, animComplete ve resize fonksiyonlarıyla eklentiyi istediğimiz kadar genişlete biliyoruz.

 

Paylaşmak istediklerinizi bize gönderin