JQuery ile Slider Yapımı

 bcakir
 24 Kasım 2011

Merhaba arkadaşlar, bu yazımda sizlere JQuery ile slider yani kayan içerik alanı yapmayı anlatacağım. Daha önce bu konu hakkında farklı örnekler yapmıştım. Ama bu yazımın farkı, hazır bir kütüphane kullanmadan bütün kodlamasının, tasarımının benim tarafımdan yapılıyor olması. Bu yazıyla slider yapmanın bütün noktalarını sizlere açıklamış olacağım, sizler de kolayca kendinize uyarlayabilecek ya da kendinizin tasarımını yapabileceksiniz. Yapacağım kayan içerik alanını biraz anlatayım. İleri ve geri butonlarımızla içerik alanını sırasıyla değiştirebileceğiz ve ayrıca da slider altında bulunacak küçük simgelerden istediğimiz içeriğe gideceğiz. Bunun yanında, her 10 saniye de bir sonraki içeriğe otomatik olarak geçecek. Yapacağımız uygulama sadece resimlere yönelik değil, resim ve açıklamalarının birlikte kullanılacağı bir slider olacak. Uygulamamızı 1000px genişliğinde ele alarak geliştireceğim. Ayrıca, uygulamanın çalışması için resimlere ihtiyacınız olacak. Bunun için, yazının sonunda çalışır halini sizlerle paylaşacağım.

<!DOCTYPE html>
<head>
<title>JQuery ile Slider Yapımı</title>
<link rel="stylesheet" href="css/style.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript">
var a=0;
$(document).ready(function(){
    //açılış ayarlarının yapılması
    $(".aciklama li").hide();
    $(".aciklama li:eq("+a+")").show();
    $("#r0").hide();
    $("#r0").attr({src:"images/s_btn2.jpg"});
    $("#r0").show();

    //geri okuna basılca çalıştır
    $("#once").click(function(){
        once();
    });
    //ileri okuna basılca çalıştır
    $("#sonra").click(function(){
        sonra();
    });
    //küçük butonlara basılınca çalıştır
    $(".slider_alt li").click(function(){
        var b=$(this).index();
        btn(b);
    });
});

//geri gitme fonksiyonu
function  once(){
    $("#r"+a).hide();
    $("#r"+a).attr({src:"images/s_btn.jpg"});
    $("#r"+a).show();
    a--;
    if(a<0){a=5};
    $("#r"+a).hide();
    $("#r"+a).attr({src:"images/s_btn2.jpg"});
    $("#r"+a).show();
    $(".resim li").hide();
    $(".aciklama li").hide();
    $(".resim li:eq("+a+")").show();
    $(".aciklama li:eq("+a+")").show();
};

//ileri gitme fonksiyonu
function  sonra(){
    $("#r"+a).hide();
    $("#r"+a).attr({src:"images/s_btn.jpg"});
    $("#r"+a).show();
    a++;
    if(a>5){a=0};
    $("#r"+a).hide();
    $("#r"+a).attr({src:"images/s_btn2.jpg"});
    $("#r"+a).show();
    $(".resim li").hide();
    $(".aciklama li").hide();
    $(".resim li:eq("+a+")").show();
    $(".aciklama li:eq("+a+")").show();
};

//buton ile slide geçiş fonksiyonu
function  btn(b){
    $("#r"+a).hide();
    $("#r"+a).attr({src:"images/s_btn.jpg"});
    $("#r"+a).show();
    a=b;
    $("#r"+a).hide();
    $("#r"+a).attr({src:"images/s_btn2.jpg"});
    $("#r"+a).show();
    $(".resim li").hide();
    $(".aciklama li").hide();
    $(".resim li:eq("+a+")").show();
    $(".aciklama li:eq("+a+")").show();
};

//her on saniyede, bir sonrakine geç
var int=self.setInterval("sonra()",10000);
</script>

<style>
/* Slider Tasarımı */
#slider_container {height: 275px; background-image: url("images/morarka.png"); background-repeat: no-repeat}
#slider_alt {height: 140px; background-image: url("images/slider_alt.jpg"); background-repeat: no-repeat}
.slider_alt {margin-left: 410px}
.slider_alt li {float:left; padding: 80px 20px 0 0}
.slider {float: left; margin-top: 50px; margin-left: 30px}
#once {margin-left: 80px; margin-top: 55px}
#sonra {margin-top: 55px}
#yazi {margin-top: 25px; width: 300px}
#goruntu {width: 289px; height: 180px; overflow: hidden}
</style>
</head>
<body>
<div id="slider_container">
    <div class="slider">
    <div id="once"><a href="javascript:void(0)"><img src="images/onceki.png" /></a></div>
    </div>
    <div class="slider">
    <div id="yazi">
        <ul class="aciklama">
            <li>1. resim ile ilgili yazı</li>
            <li>2. resim ile ilgili yazı</li>
            <li>3. resim ile ilgili yazı</li>
            <li>4. resim ile ilgili yazı</li>
            <li>5. resim ile ilgili yazı</li>
            <li>6. resim ile ilgili yazı</li>
        </ul>
    </div>
    </div>
    <div class="slider">
    <div id="goruntu">
        <ul class="resim">
            <li><a href="#"><img src="images/resim1.jpg" /></a></li>
            <li><a href="#"><img src="images/resim2.jpg" /></a></li>
            <li><a href="#"><img src="images/resim3.jpg" /></a></li>
            <li><a href="#"><img src="images/resim4.jpg" /></a></li>
            <li><a href="#"><img src="images/resim5.jpg" /></a></li>
            <li><a href="#"><img src="images/resim6.jpg" /></a></li>
        </ul>
    </div>
    </div>
    <div class="slider">
    <div id="sonra"><a href="javascript:void(0)"><img src="images/sonraki.png" /></a></div>
    </div>
</div>

<div id="slider_alt"><div class="slider_alt">
    <ul>
        <li><a href="javascript:void(0)"><img id="r0" src="images/s_btn.jpg" /></a></li>
        <li><a href="javascript:void(0)"><img id="r1" src="images/s_btn.jpg" /></a></li>
        <li><a href="javascript:void(0)"><img id="r2" src="images/s_btn.jpg" /></a></li>
        <li><a href="javascript:void(0)"><img id="r3" src="images/s_btn.jpg" /></a></li>
        <li><a href="javascript:void(0)"><img id="r4" src="images/s_btn.jpg" /></a></li>
        <li><a href="javascript:void(0)"><img id="r5" src="images/s_btn.jpg" /></a></li>
    </ul>
</div></div>
</body>
</html>

Yukarıda uygulamamızı geliştirdik. Kodlamanın uzunluğu gözünüzü korkutmasın, temel mantığı basit sayılır. Sadece, sıfırdan bir uygulama yapmayı düşünüyorsanız çalışma mantığını iyice oturtmanız gerekiyor. Onun dışında yapılan diğer adımlar uygulamayı yazıya dökmek. Yukarıya eklemediğim css sıfırlama işlemi var fakat bunu indireceğiniz zipli dosyada bulabileceksiniz. Uygulamayı bölüm bölüm açıkladım, eğer anlamadığınız bir kısım olursa yorum yapmaktan çekinmeyin. Uygulamamızı geliştirerek bir yazımızın daha sonuna geldim. Uygulamanın bütün dosyalarının zipli halini buradan indirebilirsiniz. Yararlı olması dileğiyle.

 9.869 Okunma

Bu yazıya 20 yorum yapılmış.

  1. güzel bir uygulama olmuş, emeğinize sağlık

  2. Benim için kodları çözmek biraz zor ama iyi bir uygulama olmuş. Emeğinize sağlık.

  3. uygulama güzel fakat javascript ile obje kontrollerini tam ve detaylı anlatan bir kaynak var ise bana bu konuda yardımcı olabilir misiniz?

    • Bu örneği, JavaScript’in JQuery kütüphanesiyle yaptım. Bu konuda daha fazla bilgi almak istiyorsan “jquery seçiciler” diye arama yapabilirsin internette.

  4. Hocam şimdi sitede sliderde 20 adet resim var ve ön yükleme yaparken resimler aşagı kayıyor ne yapa bilirim?

    • Eğer owerflow:hidden; css kodu kullanırsanız düzelebilir. Çünkü göstermek istediğiniz genişlikten fazlasını gizlemiş olursunuz slider alanınızın.

  5. hocam ben yapamadım bu kodu neresıne ekleyecem nasıl ekleyecem overflow:hidden;
    /* Slider */
    #slide {margin:15px;width:870px;height:177px;}
    #slide li.resim {float:left;padding-left:20px;padding-right:16px}
    #slide img {-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;border:5px solid #212121;width:112px;height:165px}
    #slide .aktif{-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;border:5px solid #c99530}
    #slide img:hover{-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;border:5px solid #c99530}
    .sol {background:url(images/ok.png);height:70px;float:left;width:35px;margin-top:40px;cursor:pointer}
    .sag {background:url(images/ok.png) -35px;height:70px;float:right;width:35px;margin-top:40px;cursor:pointer}

    • #slide {margin:15px;width:870px;height:177px;}
      kısmına koymayı dene overflow:hidden kodunu.

  6. teşekürler yaptım hocam şimdi buna hareket vermeyi düşünoyrum kendi degişecek sizin bu dosyayı indirdim

    #once {margin-left: 80px; margin-top: 55px}
    #sonra {margin-top: 55px} bu kodlarmı hareket veriyor

    • Yazdığın kısım sadece css bununla hareket yapamaszın. Ama daha önemlisi, yukarıdaki uygulama bir bütün şeklinde. Bir kısmını alıp kendine uyarlamaya çalışman, uygulamanın çalışma mantığını iyice anlamadan çok zor olur. Sliderını hareket ettirmen için JQuery kodu yazman gerekir.

  7. teşekürler hocam cok hızlı ve faydalısınız

  8. arkadaslar asadakı jquery kodlarını lınke tıklayınca degılde otamatık baslamasını ıstıyorum ne yapmam lazım saygılar

    $(document).ready(function() {
    $(‘a.link’).click(function () {
    $(‘#wrapper’).scrollTo($(this).attr(‘href’), 800);
    setPosition($(this).attr(‘href’), ‘#cloud1′, ‘0px’, ‘400px’, ‘800px’, ‘1200px’)
    setPosition($(this).attr(‘href’), ‘#cloud2′, ‘0px’, ‘800px’, ‘1600px’, ‘2400px’)

    $(‘a.link’).removeClass(‘selected’);
    $(this).addClass(‘selected’);
    return true;
    });
    });
    function setPosition(check, div, p1, p2, p3, p4) {
    if(check===’#box1′)
    {
    $(div).scrollTo(p1, 800);
    }
    else if(check===’#box2′)
    {
    $(div).scrollTo(p2, 800);
    }
    else if(check===’#box3′)
    {
    $(div).scrollTo(p3, 800);
    }
    else
    {
    $(div).scrollTo(p4, 800);
    }
    };

    • Yazdığın kodu fonksiyon içine al ve click eventini kaldır. Daha sonra da document.ready fonksiyonunda direk çağır.

  9. kardeşim güzel çalışma ama sliderin anlamı sürüklemek değilmi?
    bunda resimler durduğu yerde değişiyo? sürükleme olayı yok. ismini slider değilde başka bişey yapın ki google aramalarında millet şaşırmasın. slider ararken bu çıkıyo.

    • Hem haklısın hem de değilsin çünkü sliderın bir çok türü var. Bu site içerisinde bile ararsan 3-4 farklı slider ile karşılaşırsın.

  10. walla bole yorum yapmak pekk adetim değildir ama şu kodun tuttu beni ayakta. Eyw. hocam ellerine sağlık diğer paylasımlarını da bekliyorm. yaptgm siteyide paylascam yakında

  11. Merhaba hocam benim photoshopta hazırladığım kalıplasmıs sliderlerden ziyade özel bir tasarımım var oval seklinde ve kontrol butonlarının yuvarlagın dış cizgisine yaymayı yada sınırlı sayıda resim koyup sınırlı sayıda kontrol butonu kullanmayı düşünüyorum yani çalışmamda sabit yada belirli bir sayısı yok istedigim noktalara tıklayınca değisen resimlerin noktalarını oval cizginin etrafında olması ama li lu etiketlerini kullanarak bir türlü başaramadım. kendimi ifade edebildiğimi de zannetmiyorum ama anladıgınız kadarıyla bana yardımcı olmanız mümkün mü? örnegi ( http://www.komagene.com.tr deki sliderin tamamen yuvarlak oldugunu düşünürsek o yuvarlagın cevresinde butonların olmasını istiyorum.) reklam olmasını istemiyorum siz örnekteki linki kaldırırsınız herhalde. tesekkür ederim.

  12. hocam her şey güzel elinize sağlık. benim istediğim resimleri veritabanından çektirmek.

  13. kodlar bayağı bi işime yaradı, teşekkür ederim.

  14. hocam eline sağlık

Yazı hakkında görüşlerinizi belirtmek istermisiniz?

Daha fazla Css, JQuery
Kapat