Responsive Slider Yapımı

Bu dersimizde çözünürlüğe göre şekillenen bir slider’ı nasıl yapabileceğimizi öğreneceğiz.. Yararlı olması dileğiyle..Bu dersimizde çözünürlüğe göre şekillenen bir slider’ı nasıl yapabileceğimizi öğreneceğiz.. Yararlı olması dileğiyle..

Demo

http://www.prototurk.com/demo/?id=205

İndir

http://www.prototurk.com/download/?id=205

Yayınlayan

Tayfun Erbilen

2009’dan beri web işleriyle uğraşan, aynı zamanda amatör müziklede ilgilenen sıradan birisi..

“Responsive Slider Yapımı” üzerine 12 yorum

  1. Video'nun yararlı olduğuna şüphe yok fakat yaptığın şey "responsive" değil "liquid". Bunun dışında başarılı, tebrikler.

  2. @Enis Gürkan, otomatik dönmesi için şu kodları slider.js'e dahil edin;

    /* otomatik dönme */
    $.autoSlider = function(){
    	if ( index < length - 1 ) index++;
    	else index = 0;
    	list.stop().animate({
    		marginLeft: '-' + (index * width)
    	}, 500);
    }
    var interval = setInterval('$.autoSlider()', 2000);
    slider.hover(function(){
    	clearInterval(interval);
    	interval = null;
    }, function(){
    	interval = setInterval('$.autoSlider()', 2000);
    });
  3. Merhaba Tayfun. Bu slider illaki tıklanarak mı geçiyor ? Bunu otomatik yapmak için gerekli kodlar neler yardımcı olur musun lütfen.

  4. @İlker KAYA , yorum yazmadan önce yorumlara göz atmayı deneseydin (ki oradaki kod parçacığı nasıl dikkatini çekmedi bilmiyorum) otomatik dönmesi için gerekli kodları paylaştığımı görebilirsin.

  5. Merhaba

    Öncellikle başarılı anlatımınız için teşekkürler.

    Prev ve Next butonlarının da otomatik küçülmesi iyi olabilirdi.

  6. şahane bir anlatım olmuş fakat geçişler sırasında 3-4 tane değişik efekt kullanılabilirmi eğer oluyorsa bir örnekte öyle yapabilirmisiniz acaba

  7. Merhaba

    Öncelikle anlatım için verdiğin emeğe teşekkürler

    Yalnız tarayıcıdan küçültme yapıldığında resimde ufak bi kayma oluyor.

    Bununla ilgili biraz araştırma yaptım.
    (15kb lik küçük bi kütüphane underscore.js)
    Çalışır halini paylaşmak istiyorum. İstersen inceleyip daha iyi bir hale getirebilirsin.

    https://www.dropbox.com/s/hc7ls4cc0idi6j3/205%2B.rar

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir