jQuery ile Slider Yapımı

tarafından | 03 July 2011 tarihinde ön gösterim, web geliştirme kategorisi altında yayınlandı. | 91 yorum var.
jQuery slider

Günümüz sitelerininin (Hürriyet, Milliyet, Star Gazetesi gibi bir çok haber sitesinde) çoğunda bulunan ve bir gereksinim haline gelen jQuery slider yani manşet haberi sistemi yapımından bahsedeceğim. jQuery slider ‘ın kodlamasına geçmeden önce çalışma mantığına değinmek istiyorum. Çünkü algoritması bilinmeyen/hazır olmayan bir şeyi kodlamaya başlamak kodlarken birçok soruna neden olacaktır.

Çalışma Mantığı

jQuery sliderların genel olarak mantığı aynıdır. En iç kısımda jQuery sliderda görmek istediğimiz sayfaların bulunacağı slaytlar. Her slayt için bir blok element. Ve bu blok elementlere birer adet class. Class ları ise sıralarına göre “bir, iki, üç, dört, beş” şeklinde verdiğimizi varsayalım. Ardından bu 5 adet class ‘a sahip blok elementlerin hepsini bir blok element içine daha alıyoruz ve ID ‘sini “slider” veriyoruz. Slider ID ‘li blok elementimizi bir blok element içine daha alıyoruz, ID ‘sini “featured-slider” veriyoruz. Sanki “slider ID ‘li blok elementin içine almayı anladık ama niye bir blok elementin içine daha aldık bunları?” dediğinizi duyar gibiyim. Herşeyin bir nedeni olduğu gibi bunun da bir nedeni var. Çünkü slider ID ‘li blok elementimize position:absolute; değeri verip bu elementi sola, sağa kaydıracağız. featured-slider ID ‘li elementi blok elementi ise sadece bir sayfanın/slaytın gözükmesi için biçimlendireceğiz. Düşündüğünüz gibi featured-slider ID ‘li elementin stiline “overflow:hidden;” özelliğini vereceğiz.

Yukarıdaki resimde gördüğünüz gibi sliderımızın algoritmasını anlatmak için bir taslak hazırladık. Her elemente farklı renklerde kenarlıklar verdim. Sayfaların/slaytların içine class adlarını yazdım. Sarı kenarlıklı blok featured-slider ID ‘li elementimiz. Siyah kenarlıklı uzun blok ise slider ID ‘li elementimiz. Resimde üstteki şekilde hepsi bir bütün halinde ve hepsi gözüküyor. Bizim jQuery slider yani manşet haber sisteminde yapacağımız şey ise sadece featured-slider ID ‘li elementin içindekileri göstermek ve haricinde kalanları gizlemek. Sayfalar/slaytlar arası geçişleri ise slider ID ‘li elementimizi kaydırarak sağlayacağız. Alttaki şekilde ise featured-slider ‘a overflow:hidden; verdiğimizi yani harici kalan kısımları gizlediğimizi varsayalım. Class ‘ı “bir” olan elementin haricinde diğerleri gözükmüyor dimi? Çünkü diğerleri featured-slider ‘ın dışında kalıyor. Aynı şekilde #slider ‘ımızı bir sayfa sola kaydırıp kalan kısımları gizlediğimizi varsayalım. Alttaki ikinci şekilde olan görünümü elde edeceğiz. Geri kalan diğer 4 blok gözükmeyecektir. Ben resimde 5 elementinde şeklini anlayasınız diye çizdim.

İskelet Oluşturalım

Biçimlendirme ve jQuery ile sliderımıza hareket vermeden önce iskeletimizi oluşturalım. Çalışma mantığını anlatırken birçok kez kaç adet blok element kullanacağımızı ve nasıl yerleşim yapacağımızı söyledim.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="tr-TR">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery slider | Web Öğrencisi </title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
<script type="text/javascript" src="includes/slider.js"></script>
</head>
<body>
<div id="featured-slider">  <!-- jQuery slider/Manşet haber sistemimizin konumlandırmasını sağlayacak olan element -->
	<div id="slider">  <!-- Bu element sayesinde sola sağa kayma işlemlerini yapacağız. -->
		<div>  <!-- Birinci slayt/sayfa için başlangıç -->
			<img src="images/bir.jpg" />  <!-- Slayt/sayfada çıkmasını istediğiniz resim/fotoğraf -->
			<h2>Birinci sayfa için başlık</h2>  <!-- Gösterilecek olan yazının başlığı -->
		</div>  <!-- Birinci slayt/sayfa için bitiş -->
		<div>
			<img src="images/iki.jpg" />
			<h2>İkinci sayfa için başlık</h2>
		</div>
		<div>
			<img src="images/uc.jpg" />
			<h2>Üçüncü sayfa için başlık</h2>
		</div>
		<div>
			<img src="images/dort.jpg" />
			<h2>Dördüncü sayfa için başlık</h2>
		</div>
		<div>
			<img src="images/bes.jpg" />
			<h2>Beşinci sayfa için başlık</h2>
		</div>
	</div>
	<div id="sayfalama">  <!-- Slayt/sayfalar arası geçişi elle sağlamak için gerekli sayfalama kısmının başlangıçı -->
	<a href="#"><span>bir</span></a>  <!-- Birinci sayfa/slayta geçiş için gerekli link ve altta sırayla devam etmekte -->
	<a href="#"><span>iki</span></a>
	<a href="#"><span>uc</span></a>
	<a href="#"><span>dort</span></a>
	<a href="#"><span>bes</span></a>
	</div>
</div>
</body>
</html>

Biçimlendirme

jQuery sliderımızın iskeletini oluşturduktan sonra sıra biçimlendirmede. Boyutlandırma, renklendirme, yazı şekillendirme özellikleri haricinde birkaç özellik kullandık. Bunlar konumlandırma, görünürlük özellikleri. Altta CSS kodlarını verirken yorum satırlarında bütün özellikleri açıklamadım. Çünkü yazımız CSS hakkında değil ve çoğunu bildiğinizi varsayıyorum. Sadece jQuery sliderımızın yapısına, çalışmasına etki edebilecek özellikleri yanlarında yorum satırlarıyla açıkladım.

*{margin:0px;padding:0px;}	/* en basitinden css 'imizi sıfırlıyoruz. */
#featured-slider{width:500px;height:200px;overflow:hidden;position:relative;}	/* Bütün sayfaların gözükmemesi için overflow:hidden; kullandık. */#slider{width:2500px;height:200px;position:absolute;top:0px;left:0px;}	/* #slider elementinde bütün sayfalarımızı/slaytlarımız bulunduğu için genişliğini 2500px belirledik ve kaydırma işlemini bu element ile yaptığımız için position:absolute; tanımladık. */
#slider div{width:500px;height:200px;float:left;position:relative;}	/* #slider 'ı her seferinde sola kaydırdığımız için içindeki divlerin yanyana gözükmesi gerek. Bu yüzden float:left; tanımladık */
h2{background:url(images/titlebg.png);width:406px;height:27px;padding-top:3px;text-align:center;position:absolute;left:10px;top:10px;font:18px 'Trebuchet MS';color:#fff;}
#sayfalama{position:absolute;left:10px;bottom:10px;}
#sayfalama a{background:url(images/link.png);width:16px;height:16px;margin-right:2px;display:block;float:left;text-decoration:none;}
#sayfalama a span{display:none;}	/* Slider 'ın sol alt köşesindeki sayfa linklerinin içindeki "bir, iki, üç, dört, beş" yazılarını göstermemek için. */

Son Aşama jQuery Kısmı

jQuery sliderımızın/Manşet haber sistemimizin iskeletini oluşturduk, ardından biçimlendirdik. Şimdi ise sıra jQuery ile asıl işi yapmakta. Belli aralıklarla jQuery sliderımızın sayfalar/slaytlar arasında geçişini sağlayacağız. Bunun yanında ise sliderımızın sol alt tarafına koyduğumuz sayfalama bölümü ile sayfalar/slaytlar arası elle geçişi sağlayacağız. Gelelim jQuery kodlamamıza.

$(document).ready( function() {  // Sayfamız hazır olduğu zaman aşağıdaki kodların uygulanacağını söylüyoruz.
var i = 0;  // Hangi sayfada/slaytta [0, 1, 2, 3, 4] olduğumuzu atayacağımız değişken.
var tumgenislik = 0;  // Bu değişkende kaçıncı sayfada/slaytta ise o ve ondan önceki slaytların genişliklerinin toplamı yer alacak. Başlangıç değeri olarak 0 atıyoruz.
var genislik = $('#slider div').width();  // Ola ki slider 'ın genişliğini değiştirmek istersek hem css hem .js dosyamızda değişiklik yapmamak için '#slider div' etiketinin genişliğini bu değişkene atıyoruz.
function animasyon(px){  // Slider 'ımızın geçiş animasyonu için animasyon adında fonksiyon oluşturuyoruz.
$('#slider').stop(false, false).animate({  // #slider 'a animasyon tanımlıyoruz. Slider 'da gördüğümüz sayfaların hepsi #slider 'ın içinde bulunmakta.
left: -px  // Fonksiyona girilen px değişkeni kadar sola kaymasını sağlıyoruz.
}, 300);  // Buradaki değer animasyonun gerçekleşeceği milisaniyeyi belirtiyor.
}

 $('#sayfalama a').click(function(){  // #slider 'ın sol alt köşesinde belirlediğimiz 5 adet linke tıklanınca yapılacak işlem için fonksiyon oluşturuyoruz.
var index = $(this).index();  // Linke tıklanınca kaçıncı link olduğunu index() ile alıyoruz. İlk link 1 değil 0 değerini vermektedir.
pozisyon = index * genislik;  // #slider 'ımızı ne kadar sola kaydıracağımızı belirten değişken. Örneğin ikinci linke tıklayınca 1*500 değerini alacaktır.
animasyon(pozisyon);  // Bir önceki satırda belirlediğimiz pozisyon değişkeni kadar #slider 'ımızın sola gitmesi için gerekli fonksiyonu çalıştırıyoruz.
if(index == 4){  // #sliderımız son sayfaya/slayta geldiğinde sayfalarımız bitmiş olacağı için #slider 'ı en başa götürmemize yarıyan şart cümleciği.
i = 0;  // Şart cümlediğimiz true dönerse i değişkenine 0 değerini atayıp #slider 'ımızı en başa götürüyoruz.
}else{
i = index + 1;  // Şart cümleciğimiz false dönerse i değişkenine bir sonraki sayfanın kaçıncı sayfa olduğunu belirtiyoruz.
}
return false;  // Fonksiyonunun daha işlem yapmasına gerek kalmadığını belirtiyoruz.
 });

var zamanlayici = setInterval(function() {  // zamanlayici adında bir zamanlayıcı/timer belirliyoruz.
tumgenislik = i * genislik;  // tumgenislik değişkenini 3. satırda açıklamıştık. Hangi sayfada isek o ve ondan önceki sayfaların/divlerin genişliklerinin toplamını alıyor.
if(i==4){  // #slider 'ımızı son sayfaya geldiğini kontrol eden şart cümleciği
i = -1;  // Normalde ilk sayfamız için 0 değeri verilmesi gerek. Fakat alt satırda animasyon fonksiyonu çalışıp #slider sola doğru kayacağı için -1 değerini veriyoruz.
}
animasyon(tumgenislik);	  // #slider 'ımızın vakti gelince uygulayacağı animasyon fonksiyonu. #slider 'ı tumgenislik değişkeninin değeri kadar sola kaydırıyor.
i++;  // Zamanlayıcı her çalıştığında bir sonraki sayfaya/dive geçmesi için i değişkenini her seferinde 1 arttırıyoruz.
}, 8000);  // Buradaki değer ise zamanlayıcımızın kaç milisaniyede bir çalışması gerektiğini belirtiyor.
});

Sonuç

Yazıyı tamamıyla uyguladıktan sonra sonuç olarak aşağıdaki jQuery slider ‘a yani manşet haber sistemini elde etmiş olacaksınız.

Ali BARIN

Bağımsız arayüz geliştiriçisiyim.. OMÜ 'de bilgisayar ve öğretim teknolojileri öğretmenliği okumaktayım. Genel olarak xHTML, CSS, jQuery ve diğer web teknolojileriyle uğraşmaktayım. YAZARIN TÜM YAZILARI İÇİN TIKLAYIN!

Yorumlar (91)

  • Orhan Gazi

    Tebrikler güzel anlatım olmuş. Devamını bekleriz :)

  • Akif Yaldır

    Merhabalar,

    Stil dosyasını kaynağın içine koymayı unutmuşsunuz sanırım :) tesadüfen rastladım konunuza. Çok sade oldugunu gördüm ve tek tek yazmamak için indirdim. Ama içinde stil dosyası yok :)

    Takılan arkadaşlar http://uploaded.to/file/0imado89 adresindeki dosyayı ana dizine atsın :)

  • Ali BARIN

    @Akif Yaldır, eksikliği bildirdiğiniz için teşekkürler. İndirme linkindeki arşivi hemen güncelledim.

  • Akif Yaldır

    7.satırdaki }, kodu hatalı.

  • Ali BARIN

    @Akif Yaldır; herhangi bir hata bulunmamakta. Sadece az önce 6. satırdaki animate(); komutu üstteki yorum satırına kaymış. Fark etmemiş olmalısınız. Teşekkürler.

  • ercan

    Slider mantığında mouse üzerine gelince değişen sliderlar tercih ediliyor. buna göre editlersen bence daha güzel bir çalışma olur . kolay gelsin.

    • Ali BARIN

      Ercan bey scripts.js dosyasındaki “$(‘#sayfalama a’).click(” bölümünü “$(‘#sayfalama a’).hover(” şeklinde değiştirirseniz istediğiniz olacaktır.

  • Ali Gürbüz

    Merhaba bunun otomatik olarak geçiş yapması için ne yapmamız gerekiyor.

    • Ali BARIN

      Slider 8 saniye aralıkla otomatik olarak geçiş yapmakta zaten. Eğer sayfalama linklerinin üzerine gelince tıklamadan otomatik olarak geçiş yapsın istiyorsanız scripts.js dosyasındaki “$(‘#sayfalama a’).click(” bölümünü “$(‘#sayfalama a’).hover(” olarak değiştirmeniz yetecektir.

  • mehmet

    bir konu ancak bu kadar güzel anlatılabilir tebrik ve tesekkür ederim

  • Bilal ATALAY

    Merhaba Ali bey,
    ben sliderdaki divlerin içine ( mesela..) başka birkaç div koyunca bozuluyor. slide işlemi gerçekleşiyor fakat divlerden sıralaması ve tasarımı tamamen gidiyor. acaba bu sorunu nasıl gideririz?

  • Ali BARIN

    Merhabalar Bilal bey,

    “slider” id ‘li divin içine div eklediğiniz zaman stil dosyasındaki #slider ‘ın genişliğini düzenlemeniz gerek. Her buradaki kodlamaya göre her div ‘in genişliği 500px ve 5 adet olduğu için genişlik 2500px tanımlanmıştır. Eklediğiniz div sayısı x 500px kadar genişliği arttırırsanız düzelecektir. Örneğin 2 div daha eklerseniz 2500 + (500 * 2) ‘de genişliği 3500px yapmanız yetecektir. Ve “sayfalama” id ‘li div ‘in içindeki linkleri ona göre de çoğaltmayı unutmayınız.

    Kolay gelsin.

  • Bilal ATALAY

    Teşekkürler hallettim. Size bir sorum olduğunda nasıl ulaşabilirim acaba? msn yada facebook ?

  • Ali BARIN

    İletişim sayfasından bize ulaşabilirsiniz.

  • Bilal ATALAY

    Birde Ali bey, bu sliderı yukarıya doğru kayar bir şekilde nasıl yapabiliriz? yardımcı olursanız çok sevinirim.

  • Ali BARIN

    Slider ‘ın aşağı-yukarı hareket etmesini istiyorsanız slider.js dosyasında bulunan animasyon adlı fonksiyonundaki “left” i “top” ve yine aynı dosyadaki “genislik” değişkeninde “$(‘#slider div’).width();” yerine “$(‘#slider div’).height();” yazarsanız. Stil dosyasında ise #slider ‘ın genişliğini 500px, #slider div ‘de ise float:left; tanımlamasını kaldırırsanız istediğiniz olacaktır.

  • Bilal ATALAY

    kardeş Allah senden razı olsun daha ne diyebilirim ki. Çok teşekkürler. yaklaşık 1,5 haftadır yapamadığım şeyi senin sayende hallettim. Tekrar teşekkürler.

  • Yusuf

    Slider yapmak için 2-3 gündür uğraşıyorum, sanırım jquery öğrenecem bu gidişle :) Teşekkürler..

  • Emre ÇOBAN

    Teşekkürler Ali bey, anlaşılır ve sade bir anlatım olmuş.
    İyi çalışmalar, başarılarınızın devamını dilerim…

  • Kaan Sever

    gerçekten güzel bir anlatım olmuş, teşekkürler.

  • Abdurrahman Güngör

    Çok güzel bir makale olmuş tebrikler. Gayet akıcı ve detaylı bir anlatım.

  • Ümit Gökçe

    Anlatımınız çok güzel teşekkür ederim. Ben sizin çalışmanızı kullanarak haber7 deki slidera banzetmeye çalıştım. Numaraları aşağıya indirdim stil dosyasını kullanarak. Üzerine gelindiğinde numara arka planlarının değişmesi içinde $(‘#sayfalama a’).hover fonksiyonunun içerisine
    $(‘#sayfalama a’).css(“background-image”,”url(images/link2.png)”);
    $(this).css(“background-image”,”url(images/link.png)”); ekledim.
    Bir sorunum kaldı. O da slideların otomatik geçişi esnasında sayfalama divindeki link arka planlarını değiştirmek. Yardımcı olur musunuz?

    • Ali BARIN

      Ümit bey öncelikle teşekkürler. Aktif olan sayfalama linkinin vurgulanması için gerekli kodları istemişsiniz. Aktif olacak olan sayfalama linki için stil dosyanızda herhangi bir class oluşturduğunuzu ve bu class ‘ın adının ‘aktif’ olduğunu varsayarak bir, iki kod yazdım. Öncelikli bu fonksiyonu slider.js ‘mizde animasyon fonksiyonumuzdan önce yerleştiriyoruz. “function aktifLink(){ $(‘#sayfalama a’).each(function(a){if(a == b){ $(this).addClass(‘aktif’); }else{ $(this).removeClass(‘aktif’); } }); }”. Ardından genislik fonksiyonunu tanımladığımız satırın hemen alt satırına “var b;” yazıyoruz. Sonrasında animasyon fonksiyonunun sonuna “b = px / 500; aktifLink();” kodlarını yazıyoruz. Sayfa ilk kez açıldığında ilk sayfalama linkinin aktif şekilde gözükmesi ikinci slide ‘a geçmesine yakın bir zamanda gerçekleşecektir. Sonrasında ise düzgünce çalışacaktır.

      • Ümit Gökçe

        Ali Bey cevabınız için teşekkür ederim. Ben de şu şekilde bir çözüm bulmuştum. Onu paylaşayım. $(‘#sayfalama a.’).hover fonksiyonunun içine
        $(‘#sayfalama a’).css(“background-image”,”url(images/link2.png)”);
        $(this).css(“background-image”,”url(images/link.png)”); ekledim. üstteki tüm linklerin arka planını link2.png ye dönüştürürken bir sonraki aktif olanın üzerine gelindiğinde arka planı değiştiriyor.
        Animasyon esnasında aktif linkin arka planının değişmesi için bir fonksiyon ekledim:
        function renk(deger)
        {
        $(“#sayfalama a”).css(“background-image”,”url(images/link2.png)”);
        $(“#sayfalama a:nth-child(“+deger+”)”).css(“background-image”,”url(images/link.png)”);
        }
        ve zamanlayıcı fonksiyonunun içine renk(i+1); ekleyip çalıştırdım.
        Şimdi tek bir sorun kaldı. O da mouse aktif linkin üzerindeyken animasyonun durması ve mouse linkin üzerinden ayrıldığında animasyonun tekrar devam etmesi. Bu konuda yardımcı olabilir misiniz?

        • Ali BARIN

          “var zamanlayici” tanımlamasını tamamen kaldırıp yerine alttaki kodu yerleştirirseniz herhangi bir sayfalama linkinin üzerine gelince slider duracaktır.

          “function zamanlayici() {
          tumgenislik = i * genislik;
          if(i==m-1){
          i = -1;
          }
          animasyon(tumgenislik);
          i++;
          }
          var zaman = setInterval(zamanlayici, 1000);
          $(‘#sayfalama a’).hover(function(){clearInterval(zaman)}, function(){zaman = setInterval(zamanlayici, 1000)});”

          • Halil Çelik

            Ali bey merhaba,

            mouse üzerine gelince durma olayını ben yapamadım. yazdığınız kodları kopyalayıp dosyaya yapıştırıyorum ama burda kod formatında değil normal oldugu için sanırım çalışmadı yardımcı olabilirmisiniz.

            teşekkür ederim.

        • Halil Çelik

          Ümit bey merhaba,

          ben yapamadım bu konuda bana yardımcı olurmusunuz

          teşekkür ederim.

  • Bilal ATALAY

    Ali bey,
    belirli bir div sayısı verdiğimizde herşey güzel çalışıyor. Fakat ben bunları dbden çekeceğim ve sonucta bir sınırlama yok. Js kodları ve css dosyaları içerisinde asp kodu yazamıyorum dolayısıyla olmuyor. Bunu nasıl aşabilirim ? Nasıl sınırsız div slider yaparız?

    • Ali BARIN

      Tekrardan merhabalar,

      İstediğiniz sayıda slide eklemenize rağmen slider ‘ın bozulmamasını istemiyorsanız eğer slider.js ‘de “var i = 0;” satırının hemen altına “var m = $(‘#slider div’).length;” satırını ekler ve yine slider.js dosyasındaki “if(index == 4)” ‘ü if(index == m-1)” olarak, “if(i==4)” ‘ü de “if(i==m-1)” olarak değiştirirseniz istediğiniz olacaktır.

      • Bilal ATALAY

        peki css dosyalarında değişiklik yapmamıza gerek yokmu? sanırım gerek var?

        • Ali BARIN

          Slider ‘ın boyutları ve görselliği ile ilgili değişiklik yapmayacaksanız gerek yok. İstediğini kadar slide ekleyebilirsiniz.

          • Fatih Kızıltoprak

            Tamamda istediğim özellikti. Teşekkür ederim

  • Marko Paşa

    merhaba

    slideri burada verilenler ölçüsünde harfi harfine uyarak siteme ekledim. sadece kodlar arasındaki 4 rakamlarını 9 yaptım. çünkü 10 adet resmim var. fakat slider bir çalışıyor bir duruyor. neden böyle olduğunu bir türlü anlayamıyorum. bana en kısa zamanda yardım edebilirseniz sevinirim.

  • kadir gül

    merhaba Ali Bey ,

    Herşeyden önce böyle bir yazı için teşekkür ediyorum..Soruma gelince ben slider ımın sayfanın başından sonuna kadar kaymasını istiyorum tıpkı http://www.thumblr.com daki gibi eğer ekranınız büyükse slider’a geçiyor küçükse fade efekti var anladığım kadarıyla.yani büyük bi ekranda söylemek istediğimi anlıyacaksınız.Teşekkür ederim…

  • ahmet faruk

    güzel çalışma olmuş elinize sağlık …bu slider i veritabanına nasıl bağlayabiliriz. bi arayüz olacak oradan değişiklik yapılabilecek.

    • Ömer Çıtak

      ahmet faruk;
      kastettiğin şeyi ancak php veya asp ile yapabilirsin. eğer bilmiyosan bilen birine yaptırabilirsin. basit bişey, 1 saate yapar.

  • truvahorse

    Faydalı bir yazı. Saklıyorum.

  • Harun GÜNDÜZ

    Selamlar,

    Ali bey, anlatım çok güzel olmuş başarılarınızın devamını diliyorum.
    =)

    İyi çalışmalar
    Harun

  • celal

    jQuery Slide ı ödewimde kulllanmak istiyorum. yanlız benden istenen bu slaytı ana sayfaya yerleştirdiğimde admin panelinden bu slaytta yer alan resimlerin güncellenebilmesi…

    Yardımcı olurmusunuz ???
    Lütfennnn :(

  • HAlil İbrahim ÖZKILINÇ

    Teşekkürler. Aradığım bir anlatımdı.

  • ömer alp

    Çok teşekkürler başarılı bir çalışma olmuş emeğinize sağlık :)

  • murat melek

    elinize sağlık güzel çalışma yalnız bir sorum olucak yardımcı olursanız sevinirim, bunu tek sıra urun lıstesı sayfamda kullanıcam fakat sıralama lınkı degılde next ve prev butonu atmak ıstıyorum nasıl yapabılırım tesekkur ederım sımdıden.

  • Ömer

    öncelikle teşekkür ederim paylaşımınız için. Sorum şu; Ben bu fonksiyonu browserın boyutu değiştirildiğinde durdurmak istiyorum.nasıl durdurabilirim.

    window.onresize = windowResized;
    function windowResie zed(e){……buraya ne yazmalıyım

    Ya da boyut değiştiğinde dosyayı yeniden yükleme olayını nasıl yapabilirim.

  • berke

    elinize sağlık, daha doyurucu anlatılamazdı yazdıklarınız.

    bir sorunum var, siteme slider’a ait olan tüm dosyaları server’a attım ve html dosyasını iframe ile çağırıyorum ama bir türlü dönmüyor resimler.

    şeklinde çağırıyorum.

    neden olmuyordur acaba?

    niye olabilir acaba.

  • dogukan cabalar

    merhaba slider gerçek ten güzel ama ben bunu dikey olarak yapmak istesem
    şunun gibi http://img851.imageshack.us/img851/3643/sliderq.png

    teşekkürler şimmdiden

  • alperen karip

    Selamün aleyküm,
    Ders için teşekkür ederim . Benim bir sorum olacakdı slider’ı sol’dan veya sag’dan değil’de alttan veya üstten kaymasını ıstıyorum bunu nasıl yapabilirim?

  • alperen karip

    Sorumun cevabını aldım okumadan yorum yazdım çok özürdilerim :/

  • Kaan

    Ali bey konunuz için teşekkür ederim yanlız wordpress header kısmına sağ tarafa bu slider’i nasıl koyabiliriz acaba ? O konuda da yardımcı olabilirmisiniz rica etsem. Ben koymayı denedim ama bir türlü yapamadım.

  • Osman Erdoğan

    Sağolun Gerçekten Güzel

  • sinan

    güzel çalışma olmus.

  • Mersin Tatil Köyleri

    Paylaşımınız için teşekkür ederim.Emeğinize sağlık

  • bcakir

    Güzel bir örnek hazırlamışsınız. Sağ ve sola ileri-geri butonu ekleyerek daha da geliştirebilirsiniz.

  • serdar

    Kardeş çok teşekkür ederim ben bunu blogengine tabanlı bir blog sistemine koyacağım yardımcı olman mümkünmü?

  • Ayşin Morke

    çok güzel bir anlatım olmuş. emeğinize sağlık, çok teşekkürler !!

  • bursa koltuk yıkama

    slider en az anlatım kadar güzel olmuş hoş sade teşekkürler. başarılarınızın devamını dilerim

  • Erdi Kılıçgedik

    Çok güzel paylasımlar sizden jquery hakkında yardım almam mümkün mü acaba?

  • Yigit

    Selamlar, slider’i ayni sayfada 1 den fazla kullaninca sadece 1 tanesi calisiyor. Acaba bunun hakkinda fikriniz var mi tesekkurler.

  • delice66

    Arkadaşlar bu çok güzelde benim bir sorum olacak:
    Linke tıklanınca sayfa yenilenmeden oyunskor’un sağ üst köşede yaptığı gibi bugun.php , hafta.php ,ay.php bunları onun aynısı mantıkla nasıl yaparız ?
    Yani BUGÜN – HAFTA -AY diye linklerimiz olacak.bunlara tıklayınca içeriklerini sitemizin bir köşesinde aynı tabloda gösterecek.
    Yardım edecek olanlara şimdiden teşekkürler…

  • Aydin Gulhan

    Merhabalar…

    1- Ben 5 Den Fazla Eklemek İstiyorum 1-2-3-4-5-6-7-8-9-10 Gibi 5 Yerine 8-10 gibi Yapmak İstiyrum Ne Yapmalıyım ?

    2- Mesela Birdeyken o Nokta (link) Renk Değiştirmeli 1 Deyken 1. Sıradaki Sarı Olcak Diğerleri Beyaz 2 Deyken 2 Sarı Olcak Diğerleri Beyaz Yanı Hangısının Uzerıne Gelirse Onlar Sarı Olcak Onun İçin Ne Yapmalıyım ?

    3- Noktolardan (link) Hariç Resimlerin Yanlarına Sağ Ve Sol Ok İşareti Koymak İstiyorum (Noktolarda Kalıcak ..) Örnek Site ; m2-pro.org Burdaki Gibi Slider Varmı Acaba ?

  • fatih kamil aydın

    birde iki yana prev ve next butonları koyulabilirmi acaba bunuda kısaca anlatabilirseniz sevinirim..

  • deniz çağlar

    Merhaba. Öncelikle bilgilerinizi bizimle paylaştığınız için çok teşekkür ederim. Ben bu konularda çok uzman değil. bu slideri kendi wordpres kullanıcı panelli sitemde kullanmak istiyorum fakat nasıl yapacağımı bilmiyorum. takıldığım nokta şu. styl.php sayfam zaten temam içinde var image klasörüde var. nasıl yapmalıyım styl.php sayfasında ki kodları alıp ana şablondaki styl.php sayfasına mı yapıştırılıyor ve includes dosyasını nereye koyacam. yani anlayacağınız benim bunu çalıştırabilmem için ftpdeki tema dosyasına nasıl monte edecem bana bu konuda yardımcı olurmusunuz. şimdiden çok tşk ederim.

  • Özenç

    Öncelikle anlatım çok iyi emeğinize sağlık ama ben stop işlemini neden kullandığınız çözemedim. Bu konuda biraz daha bilgi verebilirmisiniz. Bide stop(true, true) yaptıgımızda animasyonun durması gerekmiyor mu kafamı karıştıranda bu oldu

    • Ali BARIN

      Slider ‘ın bulunduğu sekme yerine başka bir sekmeye geçtiğimizde arkaplanda slider dönmeye devam ediyormuş gibi işlem yapıyor. Ve slider ‘ın bulunduğu sekmeye geçtiğimiz zaman 10 tur biriktiyse eğer 10 turu birden hızlıca tamamlıyor. Bunu engellemek için stop() ‘u kullanıyoruz. Ayrıntılı bilgi için, http://api.jquery.com/stop/

  • Hüseyin Tekin

    Merhaba ben indirdim benim wordpress sitem var acaba nasıl eklerim ?

  • Caner ASİL

    Hocam ellerinize saglık benim bir sorum olacak
    http://a1208.hizliresim.com/10/q/c4ptw.jpg
    resime bakarsanız ? resimde ilk slider deki resimler değişiyor ama geri kalan 2 slider deki resimler değişmiyor nasıl halledeeğim 3 slider deki resimlerde değişsin

    • Ali BARIN

      Yazdığımız slider kodu eklenti/plugin mantığında çalışmadığı için her tanımladığınız slider ‘a ne yazık ki bu kodları uygulamak zorundasınız.

  • Caner ASİL

    Hocam Kaç saattir ugraşıyorum bir türlü yapamadım rica etsem projeye bakarmısınız https://rapidshare.com/files/447389729/Slider.rar ben ne yaptıysam halledemedim 1 slider deki resimler değişiyor ama 2 ve 3 tekiler olmuyor

  • Serkan ATA

    Çok güzel,harika..Şu küçük yuvarlak resimleri aktif pasif durumuna göre farklı resimler kullanarak kodlara dahil etseniz çok iyi olur..

  • Halil Çelik

    Ellerine sağlık çok güzel harika olmuş, müsadenle kullanıyorum helal et.

  • faruk arığ

    Harika Çok teşekürler Tam aradığım şey :D

  • Engin AVCI

    Hakikaten süper bir anlatım ve çalışma. Elinize ve bilginize sağlık

  • İzmir Lazer Epilasyon

    Elinize ve emeğinize sağlık.Çok teşekkür ederim.

  • ssahin

    Merhaba öncelikle paylaşımınız için çok teşekkür ederim. Sizin sliderı siteme ekledim kendi bilgisayrımda normal çalııyor fakat servera yüklediğimde geçşler olmuyor 1. sayfada kalıyor sorun ne olabilir acaba yardımcı olursanız sevinirim.

  • Muraty

    Allah razı olsun …

  • Kemal Büyük

    Resimlerin üzerine gelindiğinde site içi veya başka bir siteye nasıl link verilebilir ?

  • excellium

    Selamlar çalışmanız çok beğendim. E107 CMS ile site tasarlamaya çalışırken ihtiyacım olan image sliderı sizin sayenizde yapabildim. Umarım bir sorun olmaz, sizin kodlarınızdan yararlanarak e107 sistemi için ekelnti haline getiriyorum. Bu hale getirdim:D http://www.bizimora.net/others/LHN.jpg veritabanından haber başlığını resmini özetini ve linkini çekiyor ve sırayla gösteriyor. Umarım bunu e107 için bir plugin haline getirip yayınlamama izin verirsiniz.

  • omer

    Değerli kardeşim sadece şunu söylemek isterim. Günlerdir slayt mantığı ile ilgili temiz bir ders/kod arıyordum. Burada yazdığın bilgileri okudum, indirdim ve çok işime yaradılar.

    Allah emeklerinin karşılığını sana fazlası ile geri versin. Kolay gelsin.

  • okan taştan

    Emeğinize sağlı çok işime yaradı.

  • bilal korkmaz

    slider çok güzel olmş ali bey elinize sağlık..ben kullanmak istiyorum ama yanlız sliderde resimler geciş yaparken aynı zmanda butonlardada geciş olsaydı tam istediğim gibi olcaktı..acaba bunun için gerekli olan js ile css kodunu yazarsanaız sevinirim..ben eklerim dosyaların içine..

  • İsmail Özkan ALSAN

    S.a arkadaşım emeğine sağlık çok güzel olmuş. Ben bu geçiş olayının otomatiğe bağlanması ve geçiş süresini ayarladığınız yeri bulamadım bir türlü. Yardım eder misiniz rica etsem?

    • Ali BARIN

      setInterval methodundaki ikinci parametreyi yani 8000 değerini istediğiniz şekilde düzenlerseniz geçiş süresini değiştirmiş olursunuz.

  • MK71

    Anlatım için çok teşekkürler. WordPress temalara veya başka bi koda iframe olarak gömsek bi sorun olmaz galiba.Bi denemek lazım :D :D

  • mustafa yildiz

    merhabalar yukarida verdigim sitemde ana sayfada ve diger sayfaara jquery slider ekledim fakat slider sonunda basa dondugunde sayfa yenileniyor bunu nasil engelleyebilirim

  • vahit ünsal

    çok teşekkürler hep kendim slider yapmak istemişimdir çok saolun

  • cem kaptanoğlu

    elinize sağlık teşekkür ederim.

  • Taka Akyıldız

    Resimler arası 3d geçiş efekti nasıl verilebilir yardımcı olursanız sevinirim

  • Celal Yeşil

    Merhabalar Hocam,
    Resimlerin karışık gelmesi için ne yapabiliriz?

  • ahmet

    Sitemde kullanıyorum Elinize sağlık teşekkürler

Yorumunu gönder

# # # #

Etiketler

Desteklediklerimiz

Site Hakkında

Web Öğrencisi olarak interaktif ortamda, arayüz tasarımı trendleri hakkında bilgi veren, tasarım, kodlama ve uygulama geliştirme alanlarında dersler ve çarpıcı örnekler sunmaya çalışan henüz küçük bir oluşumuz. Amacımız tasarım&kodlama ve benzeri alanlarda çalışmalarda bulunanlar için paylaşımlarda bulunmaktır.
Copyright © 2010 wö. Tüm hakları saklıdır.