Eklentisiz Jquery Dokunmatik Slider Yapımı (Mobil Uyumlu)

Eklentisiz Jquery Dokunmatik Slider Yapımı (Mobil Uyumlu)

Jquery kütüphanesi kullanarak hem PC hem Mobil üzerinde kaydırma işlemi yapılabilen, harici bir eklentiye gerek duymadan tamamen kendi kodlamamız ile çalışan mobil uyumlu, responsive dokunmatik slider yapımını göreceğiz. Yazının en altındaki vereceğim bağlantıya tıklayarak sliderin çalışma halini indirebilir, istediğiniz düzenlemeyi yapabilirsiniz.

Dokunmatik Slider Görünümü

Büyük ve küçük slider olmak üzere 2 çeşit slider görünümü var diyebiliriz. Aslında yükseklik değeri azalınca kendi kendine bu görünüm oluşuyor. Media etiketleri ile cihazlara göre biraz daha farklı bir görünüm elde edebiliyoruz.

Slider içerisinde 2 sayfalama tipi bulunmakta. İlk sayfa tipinde sayfa ikiye bölünüp sol tarafın yazı kısmı olması, sağ tarafın resim kısmı olması.

İkinci sayfa tipinde ise arka plana resim eklemek, yazının ise sayfaya ortalanmış halde olması.

Kodlamaya geçelim.

Slider Kodlama

Slider için jquery kütüphanesini kullanıyoruz. Kod satırlarında uygulamanın işleyişiyle ilgili gerekli açıklamarı mevcut

HTML Kodu

Sliderin alt kısmında slider sayfalarını temsil eden slider butonları bulunmakta. Bu butonlar daha sonra özelleşebilir, her biri için ayrı resim, stil kullanılabileceğinden otomatik olarak değil de ayrı olarak html içerisinde bulunmasını daha uygun gördüm.


	
     
		
  • 
			
    
				
    
					
    Birinci Sayfa Başlığı
    
					
    Birinci sayfanin aciklama kismi burasi
    
				
    
			
    
			
    
				
    
					
				
    
			
    
		
    • 
		
  • 
			
    
				
    
					
    İkinci Sayfa Başlığı
    
					
    İkinci sayfanin aciklama kismi burasi
    
				
    
			
    
			
    
				
    
					
				
    
			
    
		
    • 
		
  • 
			
    
				
    
					
    Ucuncu Sayfa Başlığı
    
					
    Ucuncu sayfanin aciklama kismi burasi
    
				
    
			
    
		
    •

CSS Kodu

Sliderin kendisi responsive özelliği taşıyor. Slider içerinde yazılar ve resimler yatay ve dikey olarak ortalanıyor, resimler sliderin boyutuna göre otomatik küçülüp büyüyor. Ancak sayfa görünümü değiştikçe ufak çapta bazı görünüm bozuklukları olabiliyor. Bunu kodların en altında olan media etiketleri ile aşıyoruz.

body{
	font-family:sans-serif;
}

ol, ul {
    list-style: none;
}

/*----------Slider----------*/
.my-simple-slider {
	position: relative;
	overflow: hidden;
	padding-left: 0;
	padding-right: 0;
	margin-bottom:0;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none; /*Belirtilen yerde (özellikle yazıda) seçim yapma*/
	box-shadow: 
        0px 11px 8px -10px #f1f1f1,
        0px -11px 8px -10px #f1f1f1; 
	width:100%; 
}

.my-simple-slider li {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	transform: translateX(100%);
	cursor: move;
}

.my-simple-slider li.selected { /*secilen sayfa, aktif sayfa*/
	position: relative;
	transform: translateX(0)
}

.my-simple-slider li.move-left { /*gecis yonu efekti*/
	transform: translateX(-100%)
}

.my-simple-slider li.is-moving,
.my-simple-slider li.selected { /*gecis efektinin yavasligi*/
	transition: transform .5s
}

.my-simple-slider .mys-full-width, /*ful ekran slider sayfa*/
.my-simple-slider .mys-harf-width { /*iki bolmeli slider sayfa*/
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 1;
	left: 0;
	top: 0;
	text-align: center;
	backface-visibility: hidden;
	display: table;
	table-layout: fixed;
}

.my-simple-slider .mys-harf-width {
	width: 50%;
	float: left;
    position: relative;
}

.my-simple-slider h2,
.my-simple-slider p {
	margin: 0 auto 10px;
	width: 90%;
	text-shadow:0px 1px 5px #ccc
}

.my-simple-slider h2 {
	font-size: 24px
}

.my-simple-slider p {
	font-size: 17px;
}

.my-simple-slider .mys_content { /*slider sayfa icerik*/
	display: table-cell;
	vertical-align: middle;
}
.my-simple-slider .mys_content img { /*slider icerisindeki resim*/
	position:absolute;
	top:0;
	bottom:0; 
	right:0;
	max-height:100%;
	max-width:100%;
	/* resim ortala */
	display:block; 
	margin: auto;
	user-drag: none; 
	user-select: none;
	-moz-user-select: none;
	-webkit-user-drag: none;
	-webkit-user-select: none;
	-ms-user-select: none;
}
.my-simple-slider .mys_content a{
	color:#444
}

/*----------Slider Nav----------*/
.mys-slider-nav {
	width: 100%;
	text-align: center;
	font-weight:700;
}
.mys-slider-nav li {
	display: inline-block;
	border-radius: 50%;
	background: #f1f1f1;
	margin: 8px;
}
.mys-slider-nav .selected {
	background:#0377ef;
	box-shadow:0px 0px 1px 0px #eaeaea;
}
.mys-slider-nav .selected a{
	color:#fff
}
.mys-slider-nav a {
	display: block;
	padding: 10px 15px;
	color: #444;
	cursor: pointer;
}
.mys-slider-nav a::before {
	top: 18px
}

/*----------Slider Device Views----------*/
@media (min-width: 1281px){
	.mini-mys-slider{
		height: 150px;
	}
	.big-mys-slider{
		height: 380px;
	}
	/* 
		##Device = Desktops
		##Screen = 1281px to higher resolution desktops
	*/
}
@media (min-width: 1025px) and (max-width: 1280px){
	.mini-mys-slider{
		height: 150px;
	}
	.big-mys-slider{
		height: 380px;
	}
	/* 
		##Device = Laptops, Desktops
		##Screen = B/w 1025px to 1280px
	*/
}	
@media (min-width: 768px) and (max-width: 1024px){
	.mini-mys-slider{
		height: 150px;
	}
	.big-mys-slider{
		height: 280px;
	}
	/* 
		##Device = Tablets, Ipads (portrait)
		##Screen = B/w 768px to 1024px
	*/
}
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape){
	.mini-mys-slider{
		height: 150px;
	}
	.big-mys-slider{
		height: 280px;
	}
	/* 
		##Device = Tablets, Ipads (landscape)
		##Screen = B/w 768px to 1024px
	*/
}
@media (min-width: 481px) and (max-width: 767px){
	.mini-mys-slider{
		height: 150px;
	}
	.big-mys-slider{
		height: 260px;
	}
	/* 
		##Device = Low Resolution Tablets, Mobiles (Landscape)
		##Screen = B/w 481px to 767px
	*/
}
@media (max-width: 480px) {
	.mini-mys-slider{
		height: 150px;
	}
	.big-mys-slider{
		height: 240px;
	}
	/* 
		##Device = Most of the Smartphones Mobiles (Portrait)
		##Screen = B/w 320px to 479px
	*/	
}

JS Kodu

Slider geçişleri, üzerinde sağa yada sola yeterli bir ivmeyle kaydırılması, altında bulunan butonlara tıklanması ve otomatik geçiş olarak 3 şekilde oluyor. Otomatik geçiş özelliği slider etiketine ‘mys-autoplay’ class ismi girilerek atanabiliyor, her sliderde kullanılması istenmeyebilir. Koda geçelim. Kodları ilk olarak anlatarak parça parça daha sonra da en alta tüm olarak hepsini birden ekleyeceğim. Kod satırlarında gerekli açıklamalar da mevcut.

İlk olarak web sayfasında slider var mı kontrol edelim. Varsa if koşulu içerisinde slider kodlarımızı çalıştıralım. Slider kodlamamız içerisinde kullanacağımız değişkenleri oluşturuyoruz. Otomatik geçişi sağlayan ‘setAutoplay’ fonksiyonuna da bekleme süresini parametre olarak göndererek çalıştırıyoruz.

if ($(".my-simple-slider").length > 0) {
	var slidesWrapperLi = $(".my-simple-slider li"),
		autoPlayId = {}, //her slider icin ayri gecis ozelliginin tutuldugu dizi
		ts,te,upDown = 0, //ts: tiklandiginde ve basili tutultugunda, te: tiklama, dokunma kaldirildiginde, upDown=1 ise tiklandi, upDown=0 ise birakildi
		autoPlayDelay = 5000; //gecis bekleme suresi
		
	setAutoplay(autoPlayDelay); //otomatik gecis
}

Slider ileri ve geri yönlendirmesi için aşağıdaki fonksiyonları kullanacağız. Sliderin aşağısında bulunan slider sayfa butonlarına tıklama, sağa sola kaydırma veya otomatik geçişte bu fonksiyonlar kullanılacak. Aktif seçili olan sayfanın önünde yada arkasındaki sayfaya göre ‘nextSlide’ veya ‘prevSlide’ fonksiyonu çalışacak. Ayrıca sliderda aktif olan sayfa son sayfa ise ilk sayfaya dönmek için ‘prevSlide’, ilk sayfa ise son sayfaya gitmek için ‘nextSlide’ fonksiyonu kullanılacak.

Bu fonksiyonlar ile parametre olarak geçiş yapılan, aktif olacak sayfayı temsil eden ‘visibleSlide’ değeri, o sayfanın sliderini temsil eden ‘container’ değeri ve geçiş yapılan sayfanın diğer sayfalara göre konumunu belirten ‘n’ index değeri alınıyor.

Aktif olan sayfanın index id alınarak bu sayfanın ‘selected’ class özelliği silinecek ve önündeki yada arkasındaki sayfaya ‘selected’ class eklenerek aktif sayfa yapılacak, diğer sayfalara da ‘move-left’ class değeri verilerek hareket efekti verilecek ve sayfalarda geçiş yapılacak.

function nextSlide(visibleSlide, container, n){ //sayfalar arasi sagdan sola gecis efekti
	visibleSlide.removeClass("selected").addClass("is-moving").one("webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend", function(){
		$(this).css("left","0px");
	}); //sayfalar arasi gecis efekti
	var selectedLi = container.children("li").eq(n); //tiklanilan sayfa
	selectedLi.addClass("selected").prevAll().addClass("move-left"); //secili, aktif hale getir, diger butun sayfalari pasif yap
}

function prevSlide(visibleSlide, container, n){ //sayfalar arasi soldan saga gecis efekti
	visibleSlide.removeClass("selected").addClass("is-moving").one("webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend", function(){
		$(this).css("left","0px");
	}); //sayfalar arasi gecis efekti
	var selectedLi = container.children("li").eq(n); //tiklanilan sayfa
	selectedLi.addClass("selected").removeClass("move-left").nextAll().removeClass("move-left"); //secili, aktif hale getir, diger butun sayfalari pasif yap
}

Sayfalar arası geçiş olduğunda sliderin altında bulunan butonların güncellenmesi gerekecek. Parametre olarak geçiş yapılan sliderin butonlarının bulunduğu container nesnesini temsilen ‘pagination’ ve aktif olan slider sayfayı temsilen ‘n’ değeri geliyor. Bu verilere göre istenilen buton grubundan istenilen sıradaki butonu seçili hale getiriyoruz.

function updateSliderNavigation(pagination, n) { //slider menu buton
	var navigationDot = pagination.find(".selected"); //butonlarda secili, aktif, selected butonu bul
	navigationDot.removeClass("selected"); //selected classı sil
	pagination.find("li").eq(n).addClass("selected"); //gecis yapilan, yeni aktif olan slider sayfanin butonuna selected class ekle, aktif yap
}

Ardından slider üzerinde otomatik geçiş yapılmasını sağlayan fonksiyonları ekliyoruz. İki parametre ile çalışabilir ancak sürükle bırak veya butonlara tıklama yoluyla manuel olarak slider üzerinde sayfalar arası geçiş yapılmak istenirse ikinci parametre ile geçiş yapılmak istenen sliderin container elemanını alıyoruz ve sadece bu slider üzerindeki otomatik geçiş ayarlamalarını güncelliyoruz.

function setAutoplay(delay,slidesWrapper) { //class="mys-autoplay" degerine sahip slider elemanlara otomatik gecis ozelligi
	slidesWrapper = slidesWrapper?slidesWrapper:""; //ie hatasi cozumu
	/*
		slidesWrapper: Gecis yapmak istenilen, tiklanilan sayfanin  slider nesnesi 
		bu deger var ise sayfada tiklanarak veya dokunarak gecis yapilmak istenmis demektir.
	*/
	if ($(".mys-autoplay").length > 0 && !slidesWrapper){ //site ilk yuklendiginde
		var i=0;
		$(".mys-autoplay").each(function(){ //otomatik gecis istenen butun slider elemanlarini gez
			var slidesWrapper = $(this), //slideri al
				mysID = ''; //autoPlayID icin kullanilacak, her slider icin belirtec id
			if (!slidesWrapper.attr("id")){ //clearInterval isleminin basarili olmasi icin sliderlere id atamasi yapiyoruz, sadece sayfa yuklendiginde 1 kere calissin
				mysID = "mys-id-"+i;
				slidesWrapper.attr("id",mysID)
				i++;
			}
			var sliderElementLength = slidesWrapper.children("li").length; //slider sayfa sayisi
			/*
				her slider icin otomatik gecis dongu islemi ayri ayri uygulansin ve bu islem bir diziye aktarilsin
				slider menuye veya slidere tiklanilip sayfalar arasi gecis yapilmak istenir ise bu dizi degerleri uzerinden 
				erisim saglayip, o ssliderin slider gecis silecegiz ve tekrar olusturacagiz 
				yani her slider icin gecis efekti bekleme suresini guncelliyoruz. 
				Boylelikle gecis efekti hatasi olmayacak, sliderlar arasi gecis karisikligi olmayacak
			*/
			/*
				site acildiginde otomatik gecis guncellenir ve aktif olur
				autoPlayDelay degerine yazilan saniye kadar sonra otomatik olarak sayfa gecisleri baslar
			*/
			autoPlayId[mysID] = window.setInterval(function(){ //autoPlayDelay saniye de bir autoplaySlider fonksiyonu calisir
				autoplaySlider(slidesWrapper,sliderElementLength)
			}, autoPlayDelay); //autoPlayDelay deki saniye degeri kadar otomatik gecis bekleme suresi
		});
	}else if ($(".mys-autoplay").length > 0 && slidesWrapper && slidesWrapper.hasClass("mys-autoplay")){ //sayfaya tiklanildiginde
		var mysID = slidesWrapper.attr("id"),
			sliderElementLength = slidesWrapper.children("li").length;
		clearInterval(autoPlayId[mysID]); //sayfa gecisi yapilmak istenen slider uzerindeki gecis efekti sıfırlansin, silinsin
		/*
			sayfa tiklenilip gecis yapildiginde otomatik gecis guncellenir ve aktif olur
			autoPlayDelay degerine yazilan saniye kadar sonra otomatik olarak sayfa gecisleri baslar
		*/
		autoPlayId[mysID] = window.setInterval(function(){ //gecis efektini tekrar olusturalım
			autoplaySlider(slidesWrapper,sliderElementLength)
		}, autoPlayDelay);
	}
}

function autoplaySlider(slidesWrapper,length) {
	var selectedPosition = slidesWrapper.find(".selected").index();
	if( selectedPosition < length - 1) {
		selectedPosition +=1;
		nextSlide(slidesWrapper.find(".selected"), slidesWrapper, selectedPosition); //ileri efekti verilsin
	} else {
		selectedPosition = 0;
		prevSlide(slidesWrapper.find(".selected"), slidesWrapper, selectedPosition); //geri efekti verilsin
	}
	var sliderNav = slidesWrapper.next();
	updateSliderNavigation(sliderNav, selectedPosition); //slider menu guncelle
}

Devamında slider butonlara tıklanıldığında sayfalar arası geçiş yapılmasını sağlayan aşağıdaki click eventli fonksiyonumuzu ekliyoruz.

$(".mys-slider-nav").on("click", "li", function(event){ //slider buton tiklanildiginde
	event.preventDefault();
	var selectedItem = $(this), //tiklanilan li etiketi
		sliderNav = selectedItem.closest(".mys-slider-nav"), //tiklanilan sliderin menu buton kapsayici div
		slidesWrapper = sliderNav.prev(), //tiklanilan slider
		slidesNumber = slidesWrapper.children("li").length; //tiklanilan sliderin sayfa sayisi
	if(!selectedItem.hasClass("selected")) { //tiklanilan sayfa selected olarak atanmadiysa, class i selected degil ise
		var selectedPosition = selectedItem.index(), //tiklanilan li etiketinin index numarasini al
			activePosition = slidesWrapper.find("li.selected").index(); //su an ki aktif slider sayfanin index id sini al
		if( activePosition < selectedPosition) { //tiklanilan sayfa id degeri su an ki aktif sayfa id degerinden buyuk ise
			nextSlide(slidesWrapper.find(".selected"), slidesWrapper, selectedPosition); //ileri efekti verilsin
		} else { //degil ise
			prevSlide(slidesWrapper.find(".selected"), slidesWrapper, selectedPosition); // geri efekti verilsin
		}

		updateSliderNavigation(sliderNav, selectedPosition); //slider menu guncellensin
		setAutoplay(autoPlayDelay,slidesWrapper); //otomatik gecis guncellensin
	}
});

Slider uygulamamız bu kodlama ile normal çalışır vaziyette. Bu uygulamaya jquery ile dokunmatik özelliğini vermemiz gerekiyor.

PC üzerinde veya mobil üzerinde sürükle bırak özelliğinin mantığı şu:

  • Tıklama veya dokunma anındaki ekrandaki pozisyonun yatay olarak (x) piksel cinsinden konumunu alınır
  • Tıklandıktan veya dokunduktan sonra elimizi kaldırdığımız andaki yatay konum alınır
  • İkinci konum birinci konuma göre yatay olarak sağında yada solunda olduğu birbiriyle çıkarma işlemi yapılarak bulunur. Böylelikle sağa yada sola kaydırma işlemi yaptığı belirlenir. Ayrıca bu çıkarma işleminin farkının büyüklüğüne göre de sürükleme şiddeti belirlenir. Yeterli derece sürükleme ivmesi, şiddeti yok ise slider üzerinde kaydırma işlemi yapılmaz.
  • Tıklanılan ve bırakılan pozisyonun slider elemanının içerisinde olması gerekir. Değil ise sürüklenerek kaydırılan sayfa eski haline geri döner.

Bu işlemleri gerçekleştirmek için slider üzerindeki olayları yakalayabilmemiz gerekir. Tıklama ve dokunma işlemi mobil ve PC olarak 2 ayrı platform üzerinde işlenen mantığı aynı olayları farklı işlemler. Birinde el ile birinde mouse ile istenilen yere dokunma, tıklama işlemi yapıyoruz ancak kodlama da 2 farklı kod ile belirtiyoruz. Bu olaylar ile tıklanılan yada dokunulan kordinatları bulacağız. Aşağıda yakalamamız gereken olayları listeliyorum.

  • Touchstart – dokunma anını —— Mousedown – tıklama anı
  • Touchend – dokunmayı bırakma, elimizi çektiğimizde —— Mouseup – tıklamayı bırakma anı, fareden elimizi çektiğimizde
  • Touchmove – ekran üzerindeki hareketleri —— Mousemove – fare hareketleri
  • Mouseleave – mpuse belirtilen nesnenin üzerinden ayrıldıysa

İlk olarak tıklanma ve dokunma olayını yakalayalım. Bind fonksiyonu ile birden fazla olayı izleme işlemini yaparak ayrı ayrı fazladan kod yazmamıza gerek kalmıyor. Yukarıdaki kodlarla tıklanılan veya dokunulan bölgenin konumunu alıyoruz. Eğer PC üzerinde konum alamıyorsak mobil üzerindeyiz demektir o zaman mobilde dokunma konumunu alıyoruz. Kaydırmanın başladığını belirtmek için ‘upDown’ değişkenine 1 değerini veriyoruz, tıklanma konumunu da ‘ts’ değişkenine aktarıyoruz.

slidesWrapperLi.bind("touchstart mousedown", function (e){ //dokunulduğunda (touchstart:Mobil, mousedown:PC)
   upDown = 1; //kaydirma baslandi, tiklandi
   ts = e.pageX; //PC tiklama pozisyonu
	if (!ts){
		ts = e.originalEvent.touches[0].clientX; //Mobil dokunma pozisyonu
	}
});

Ardından tıklandığında veya dokunduğunda slider üzerinde, ekranda elimizi veya faremizi hareket ettirme olaylarını izliyoruz. Önceden slider sayfa üzerinde tıklama yapıldı ama hala bırakılmadan hareket halinde ise sayfayı sağa veya sola kaydırma işlemini yapıyoruz ve bu işlem sırasında da sürekli ‘te’ değişkenine fare veya dokunmanın konumunu aktarıyoruz. Bu konumu da sayfanın stil özelliği olan ‘left’ değerine aktararak sayfanın sağa veya sola kaydırılmasını anlık olarak sağlıyoruz.

slidesWrapperLi.bind("touchmove mousemove", function (e){ //ekran üzerindeki dokunmayı ve fareyi izleme
	//tiklama ve birakma arasındaki fare hareketi, sayfayi saga yada sola surukleme hali
	if (upDown){ //slider sayfa uzerine tiklama yapildi ama birakilmadiysa
		te = e.pageX; //PC hareket halindeki fare pozisyonu
		if (!te){
			te = e.originalEvent.changedTouches[0].clientX; //Mobil hareket halindeki dokunma hareketi pozisyonu
		}
		//ekranda acik olan sayfa ile onun onundeki ve arkasındaki sayfalar suruklenme pozisyonu kadar saga yada sola hareketlensin, kaysin
		$(this).css("left",(te-ts)+"px"); 
		$(this).next().css("left",(te-ts)+"px");
		$(this).prev().css("left",(te-ts)+"px"); 
	}
});

Eğer fare hareketini sonlandırma yani fareden elimizi çektiğimiz konum slider sayfa üzerinde değil ise sayfayı eski haline getiriyoruz ve tıklama ve dokunma işleminin bittiğini belirtmek, kandırma işlemini sonlandırmak için ‘upDown’ değişkenine 0 değerini atıyoruz.

slidesWrapperLi.bind("mouseleave", function (e){ //slider sayfa uzerinde dokunma, tiklama birakildiysa
	upDown = 0; //tiklama, dokunma birakildi
	//ekranda acik olan sayfa ile onun onundeki ve arkasındaki sayfalar eski haline yavasca hareketlensin, kaysin
	$(this).animate({"left":"0px"}, 200); //aktif olan sayfa eski hale gelsin
	$(this).next().animate({"left":"0px"}, 200);
	$(this).prev().animate({"left":"0px"}, 200);
});

Slider sayfa üzerinde dokunma veya fare hareketimiz devam ediyorken ise tıklama veya dokunma işlemini kaldırdığımızda ‘upDown’ değişkenine kaydırmanın sonlandığını belirtmek için 0 değerini giriyoruz ve tıklamayı veya dokunmayı bırakma konumunu ‘te’ değişkenine aktarıyoruz. Tıklama veya dokunma anı ile bırakma anı kordinatlarını birbirine kıyaslıyoruz ve bu kıyaslama ile sayfanın sağa yada sola kaydırıldığını belirleyip bu doğrultuda slider kaydırma işlemini tamamlıyoruz. Slider sayfa geçişi yapıldığında slider otomatik geçiş işlemini ve slider butonlarını güncelliyoruz.

slidesWrapperLi.bind("touchend mouseup", function (e){ //bırakıldığında (touchend:Mobil, mouseup:PC)
	upDown = 0; //kaydirma sonlandi
	te = e.pageX; //PC birakma pozisyonu
	if (!te){
		te = e.originalEvent.changedTouches[0].clientX; //Mobil birakma pozisyonu
	}
	var slidesWrapper = $(this).closest(".my-simple-slider"),
		sliderNav = slidesWrapper.next(),
		selectedPosition = slidesWrapper.children("li.selected").index(), //su an aktif slider sayfa
		notUpdatedPosition = selectedPosition,
		slidesNumber = slidesWrapper.children("li").length;
	if(ts > te+65){
		/*
			tıklanılan yer, bırakılan yerden en az 65 piksel daha sağda ise, 
			yani sağdan sola doğru sürükle bırak yapıldıysa ve 5 piksellik bir sürükleme söz konusu ise
		*/
		if( selectedPosition < slidesNumber - 1) { //su an aktif sayfa sliderin sonuncu sayfasi degil ise
			selectedPosition +=1;
			nextSlide(slidesWrapper.find(".selected"), slidesWrapper, selectedPosition);
		}else{ //sonuncu sayfa ise
			selectedPosition = 0;
			prevSlide(slidesWrapper.find(".selected"), slidesWrapper, selectedPosition);
		}
	}else if(ts < te-65){
		/*
			tıklanılan yer, bırakılan yerden en az 65 piksel daha solda ise
		*/
		if( selectedPosition > 0) { //su an aktif sayfa sliderin ilk sayfasi degil ise
			selectedPosition -=1;
			prevSlide(slidesWrapper.find(".selected"), slidesWrapper, selectedPosition);
		}else{ //ilk sayfa ise
			selectedPosition = slidesNumber - 1;
			nextSlide(slidesWrapper.find(".selected"), slidesWrapper, selectedPosition);
		}
	}else{ //gecis yapmak icin sayfa surukleme kuvveti yeterli degil
		$(this).animate({"left":"0px"}, 200); //sayfa suruklenmeden onceki eski haline yavasca kaysin
	}
	//sayfa gecisleri yumusak olsun
	if( notUpdatedPosition == slidesNumber - 1 && selectedPosition == 0) { //slider de tek sayfa varsa
		$(this).css("left","0px");
		$(this).next().css("left","0px");
		$(this).prev().css("left","0px");
	}else{
		$(this).next().animate({"left":"0px"}, 500);
		$(this).prev().animate({"left":"0px"}, 500);
	}
	updateSliderNavigation(sliderNav, selectedPosition); //surukle bırak yontemi ile sayfa gecisi yapildiginde slider butonlari guncelle
	setAutoplay(autoPlayDelay,slidesWrapper); //otomatik gecis guncelle
});

JS tarafını da bitirmiş oluyoruz. Javascript sürükle bırak slider uygulaması kodlarının bütün hali aşağıdaki gibidir.

$(function(){
	/*------------Slider------------*/
	if ($(".my-simple-slider").length > 0) {
		var slidesWrapperLi = $(".my-simple-slider li"),
			autoPlayId = {}, //her slider icin ayri gecis ozelliginin tutuldugu dizi
			ts,te,upDown = 0, //ts: tiklandiginde ve basili tutultugunda, te: tiklama, dokunma kaldirildiginde, upDown=1 ise tiklandi, upDown=0 ise birakildi
			autoPlayDelay = 5000; //gecis bekleme suresi
			
		setAutoplay(autoPlayDelay); //otomatik gecis
		
		$(".mys-slider-nav").on("click", "li", function(event){ //slider buton tiklanildiginde
			event.preventDefault();
			var selectedItem = $(this), //tiklanilan li etiketi
				sliderNav = selectedItem.closest(".mys-slider-nav"), //tiklanilan sliderin menu buton kapsayici div
				slidesWrapper = sliderNav.prev(), //tiklanilan slider
				slidesNumber = slidesWrapper.children("li").length; //tiklanilan sliderin sayfa sayisi
			if(!selectedItem.hasClass("selected")) { //tiklanilan sayfa selected olarak atanmadiysa, class i selected degil ise
				var selectedPosition = selectedItem.index(), //tiklanilan li etiketinin index numarasini al
					activePosition = slidesWrapper.find("li.selected").index(); //su an ki aktif slider sayfanin index id sini al
				if( activePosition < selectedPosition) { //tiklanilan sayfa id degeri su an ki aktif sayfa id degerinden buyuk ise
					nextSlide(slidesWrapper.find(".selected"), slidesWrapper, selectedPosition); //ileri efekti verilsin
				} else { //degil ise
					prevSlide(slidesWrapper.find(".selected"), slidesWrapper, selectedPosition); // geri efekti verilsin
				}

				updateSliderNavigation(sliderNav, selectedPosition); //slider menu guncellensin
				setAutoplay(autoPlayDelay,slidesWrapper); //otomatik gecis guncellensin
			}
		});
		
		function nextSlide(visibleSlide, container, n){ //sayfalar arasi sagdan sola gecis efekti
			visibleSlide.removeClass("selected").addClass("is-moving").one("webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend", function(){
				$(this).css("left","0px");
			}); //sayfalar arasi gecis efekti
			var selectedLi = container.children("li").eq(n); //tiklanilan sayfa
			selectedLi.addClass("selected").prevAll().addClass("move-left"); //secili, aktif hale getir, diger butun sayfalari pasif yap
		}

		function prevSlide(visibleSlide, container, n){ //sayfalar arasi soldan saga gecis efekti
			visibleSlide.removeClass("selected").addClass("is-moving").one("webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend", function(){
				$(this).css("left","0px");
			}); //sayfalar arasi gecis efekti
			var selectedLi = container.children("li").eq(n); //tiklanilan sayfa
			selectedLi.addClass("selected").removeClass("move-left").nextAll().removeClass("move-left"); //secili, aktif hale getir, diger butun sayfalari pasif yap
		}

		function setAutoplay(delay,slidesWrapper) { //class="mys-autoplay" degerine sahip slider elemanlara otomatik gecis ozelligi
			slidesWrapper = slidesWrapper?slidesWrapper:""; //ie hatasi cozumu
			/*
				slidesWrapper: Gecis yapmak istenilen, tiklanilan sayfanin  slider nesnesi 
				bu deger var ise sayfada tiklanarak veya dokunarak gecis yapilmak istenmis demektir.
			*/
			if ($(".mys-autoplay").length > 0 && !slidesWrapper){ //site ilk yuklendiginde
				var i=0;
				$(".mys-autoplay").each(function(){ //otomatik gecis istenen butun slider elemanlarini gez
					var slidesWrapper = $(this), //slideri al
						mysID = ''; //autoPlayID icin kullanilacak, her slider icin belirtec id
					if (!slidesWrapper.attr("id")){ //clearInterval isleminin basarili olmasi icin sliderlere id atamasi yapiyoruz, sadece sayfa yuklendiginde 1 kere calissin
						mysID = "mys-id-"+i;
						slidesWrapper.attr("id",mysID)
						i++;
					}
					var sliderElementLength = slidesWrapper.children("li").length; //slider sayfa sayisi
					/*
						her slider icin otomatik gecis dongu islemi ayri ayri uygulansin ve bu islem bir diziye aktarilsin
						slider menuye veya slidere tiklanilip sayfalar arasi gecis yapilmak istenir ise bu dizi degerleri uzerinden 
						erisim saglayip, o ssliderin slider gecis silecegiz ve tekrar olusturacagiz 
						yani her slider icin gecis efekti bekleme suresini guncelliyoruz. 
						Boylelikle gecis efekti hatasi olmayacak, sliderlar arasi gecis karisikligi olmayacak
					*/
					/*
						site acildiginde otomatik gecis guncellenir ve aktif olur
						autoPlayDelay degerine yazilan saniye kadar sonra otomatik olarak sayfa gecisleri baslar
					*/
					autoPlayId[mysID] = window.setInterval(function(){ //autoPlayDelay saniye de bir autoplaySlider fonksiyonu calisir
						autoplaySlider(slidesWrapper,sliderElementLength)
					}, autoPlayDelay); //autoPlayDelay deki saniye degeri kadar otomatik gecis bekleme suresi
				});
			}else if ($(".mys-autoplay").length > 0 && slidesWrapper && slidesWrapper.hasClass("mys-autoplay")){ //sayfaya tiklanildiginde
				var mysID = slidesWrapper.attr("id"),
					sliderElementLength = slidesWrapper.children("li").length;
				clearInterval(autoPlayId[mysID]); //sayfa gecisi yapilmak istenen slider uzerindeki gecis efekti sıfırlansin, silinsin
				/*
					sayfa tiklenilip gecis yapildiginde otomatik gecis guncellenir ve aktif olur
					autoPlayDelay degerine yazilan saniye kadar sonra otomatik olarak sayfa gecisleri baslar
				*/
				autoPlayId[mysID] = window.setInterval(function(){ //gecis efektini tekrar olusturalım
					autoplaySlider(slidesWrapper,sliderElementLength)
				}, autoPlayDelay);
			}
		}

		function autoplaySlider(slidesWrapper,length) {
			var selectedPosition = slidesWrapper.find(".selected").index();
			if( selectedPosition < length - 1) {
				selectedPosition +=1;
				nextSlide(slidesWrapper.find(".selected"), slidesWrapper, selectedPosition); //ileri efekti verilsin
			} else {
				selectedPosition = 0;
				prevSlide(slidesWrapper.find(".selected"), slidesWrapper, selectedPosition); //geri efekti verilsin
			}
			var sliderNav = slidesWrapper.next();
			updateSliderNavigation(sliderNav, selectedPosition); //slider menu guncelle
		}
		
		function updateSliderNavigation(pagination, n) { //slider menu buton
			var navigationDot = pagination.find(".selected"); //butonlarda secili, aktif, selected butonu bul
			navigationDot.removeClass("selected"); //selected classı sil
			pagination.find("li").eq(n).addClass("selected"); //gecis yapilan, yeni aktif olan slider sayfanin butonuna selected class ekle, aktif yap
		}
		
		/*------SürükleBırak------*/
		slidesWrapperLi.bind("touchstart mousedown", function (e){ //dokunulduğunda (touchstart:Mobil, mousedown:PC)
		   upDown = 1; //kaydirma baslandi, tiklandi
		   ts = e.pageX; //PC tiklama pozisyonu
			if (!ts){
				ts = e.originalEvent.touches[0].clientX; //Mobil dokunma pozisyonu
			}
		});

slidesWrapperLi.bind("touchend mouseup", function (e){ //bırakıldığında (touchend:Mobil, mouseup:PC)
	upDown = 0; //kaydirma sonlandi
	te = e.pageX; //PC birakma pozisyonu
	if (!te){
		te = e.originalEvent.changedTouches[0].clientX; //Mobil birakma pozisyonu
	}
	var slidesWrapper = $(this).closest(".my-simple-slider"),
		sliderNav = slidesWrapper.next(),
		selectedPosition = slidesWrapper.children("li.selected").index(), //su an aktif slider sayfa
		notUpdatedPosition = selectedPosition,
		slidesNumber = slidesWrapper.children("li").length;
	if(ts > te+65){
		/*
			tıklanılan yer, bırakılan yerden en az 65 piksel daha sağda ise, 
			yani sağdan sola doğru sürükle bırak yapıldıysa ve 5 piksellik bir sürükleme söz konusu ise
		*/
		if( selectedPosition < slidesNumber - 1) { //su an aktif sayfa sliderin sonuncu sayfasi degil ise
			selectedPosition +=1;
			nextSlide(slidesWrapper.find(".selected"), slidesWrapper, selectedPosition);
		}else{ //sonuncu sayfa ise
			selectedPosition = 0;
			prevSlide(slidesWrapper.find(".selected"), slidesWrapper, selectedPosition);
		}
	}else if(ts < te-65){
		/*
			tıklanılan yer, bırakılan yerden en az 65 piksel daha solda ise
		*/
		if( selectedPosition > 0) { //su an aktif sayfa sliderin ilk sayfasi degil ise
			selectedPosition -=1;
			prevSlide(slidesWrapper.find(".selected"), slidesWrapper, selectedPosition);
		}else{ //ilk sayfa ise
			selectedPosition = slidesNumber - 1;
			nextSlide(slidesWrapper.find(".selected"), slidesWrapper, selectedPosition);
		}
	}else{ //gecis yapmak icin sayfa surukleme kuvveti yeterli degil
		$(this).animate({"left":"0px"}, 200); //sayfa suruklenmeden onceki eski haline yavasca kaysin
	}
	//sayfa gecisleri yumusak olsun
	if( notUpdatedPosition == slidesNumber - 1 && selectedPosition == 0) { //slider de tek sayfa varsa
		$(this).css("left","0px");
		$(this).next().css("left","0px");
		$(this).prev().css("left","0px");
	}else{
		$(this).next().animate({"left":"0px"}, 500);
		$(this).prev().animate({"left":"0px"}, 500);
	}
	updateSliderNavigation(sliderNav, selectedPosition); //surukle bırak yontemi ile sayfa gecisi yapildiginde slider butonlari guncelle
	setAutoplay(autoPlayDelay,slidesWrapper); //otomatik gecis guncelle
});
		
		slidesWrapperLi.bind("touchmove mousemove", function (e){ //ekran üzerindeki dokunmayı ve fareyi izleme
			//tiklama ve birakma arasındaki fare hareketi, sayfayi saga yada sola surukleme hali
			if (upDown){ //slider sayfa uzerine tiklama yapildi ama birakilmadiysa
				te = e.pageX; //PC hareket halindeki fare pozisyonu
				if (!te){
					te = e.originalEvent.changedTouches[0].clientX; //Mobil hareket halindeki dokunma hareketi pozisyonu
				}
				//ekranda acik olan sayfa ile onun onundeki ve arkasındaki sayfalar suruklenme pozisyonu kadar saga yada sola hareketlensin, kaysin
				$(this).css("left",(te-ts)+"px"); 
				$(this).next().css("left",(te-ts)+"px");
				$(this).prev().css("left",(te-ts)+"px"); 
			}
		});
		
		slidesWrapperLi.bind("mouseleave", function (e){ //slider sayfa uzerinde dokunma, tiklama birakildiysa
			upDown = 0; //tiklama, dokunma birakildi
			//ekranda acik olan sayfa ile onun onundeki ve arkasındaki sayfalar eski haline yavasca hareketlensin, kaysin
			$(this).animate({"left":"0px"}, 200); //aktif olan sayfa eski hale gelsin
			$(this).next().animate({"left":"0px"}, 200);
			$(this).prev().animate({"left":"0px"}, 200);
		});
	}
});

Jquery ile kaldırmalı slider örneği bu kadar. Uygulamanın çalışır vaziyetteki halini DokunmatikSliderYapimi adlı dosyayı indirerek ulaşabilirsiniz. Kalın sağlıcakla…

Yorum Yap
0 Yorum yapan