Sade Manşet Eklentisi – Responsive jQuery Slider & Slideshow

    Sade Manşet Eklentisi - Responsive jQuery Slider & Slideshow

    Bu yazımda sizlere en sade manşet eklentisi olan Responsive Slider’ı tanıtacağım. Bugüne kadar gördüğüm en sade ve bir o kadar da kullanışlı manşet eklentisi. Bu kadar sade olmasına karşın üstünde oynanabilecek birçok ayarı var.

    Responsive Slider’ı sitenize eklemek için aşağıdaki adımları uygulayın:

    1. Adım

    Öncelikler sitenizde jQuery kütüphanesinin çağrılmış olması gerekiyor. Çağırmadıysanız aşağıdaki kodu sitenize ekleyin.

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

    2. Adım

    Aşağıdaki kodları manşetin nerede durmasını istiyorsanız oraya koyun. Kod içeriğinde javascript kodları da var. Bu yüzden içindeki javascript kodlarını </head> etiketinin öncesine koyabilirsiniz. Kod bilginiz yoksa bir önceki cümlede söylediklerimi uygulamayın.

    <script src='http://static.tumblr.com/fdpmzhl/LU1mpelf3/slider.js' type='text/javascript'/>

    <style type='text/css'>.rslides {
    position: relative;
    list-style: none;
    overflow: hidden;
    width: 100%;
    padding: 0;
    margin: 0;
    }

    .rslides li {
    -webkit-backface-visibility: hidden;
    position: absolute;
    display: none;
    width: 100%;
    left: 0;
    top: 0;
    }

    .rslides li:first-child {
    position: relative;
    display: block;
    float: left;
    }

    .rslides img {
    display: block;
    height: auto;
    float: left;
    width: 100%;
    border: 0;
    }</style>

    <script type='text/javascript'>
    $(function() {
    $(&quot;.rslides&quot;).responsiveSlides();
    });</script>

    <script type='text/javascript'>

    $(function () {

    $(&quot;#furkanozdenslider&quot;).responsiveSlides({
    auto: true, // Animasyon rastgele mi olsun? true ya da false
    speed: 500, // Animasyon hızı
    timeout: 5000, // Geçiş süresi
    pager: false, // Sayfalama gösterilsin mi? true ya da false
    nav: false, // Navigasyon gösterilsin mi? true ya da false
    random: false, // İçerik rastgele mi geçsin? true ya da false
    pause: true, // Resmin üstüne gelince dursun mu? true ya da false
    pauseControls: true, // Durunca resim üzerinde kontroller görünsün mü? true ya da false
    prevText: &quot;Önceki&quot;,
    nextText: &quot;Sonraki&quot;,
    maxwidth: &quot;974&quot;, // Slider'ın genişlik değeri
    navContainer: &quot;&quot;,
    manualControls: &quot;&quot;,
    namespace: &quot;rslides&quot;,
    before: function(){},
    after: function(){}
    });
    });
    </script>

    <ul class="rslides" id="furkanozdenslider">
    <li><a href="RESİM BAĞLANTISI"><img width="" height="" src="RESİM YOLU" alt="" title="RESİM YAZISI"/></a></li>

    <li><a href="RESİM BAĞLANTISI"><img width="" height="" src="RESİM YOLU" alt="" title="RESİM YAZISI"/></a></li>

    <li><a href="RESİM BAĞLANTISI"><img width="" height="" src="RESİM YOLU" alt="" title="RESİM YAZISI"/></a></li>
    </ul>
    </div>

    3. Adım

    Bu kodları sitenize ekledikten sonra tek yapmanız gereken kırmızı ile renklendirdiğim yere resme tıklanınca gidilecek bağlantıyı; yeşil ile renklendirdiğim yere resmin bulunduğu url adresi; turuncu ile renklendirdiğim yere de resim yazısını girmek.

    Örnekleri Gör

    Bu manşet eklentisi Viljami Salminen tarafından yapılmıştır.

    İlgili Bağlantılar

    Rate this post

    Paylaş

    3 Cevaplar

    1. emre demirer dedi ki:

      saol paylaşım için güzelmiş

    2. Turhan Polat dedi ki:

      Çok güzel furkan kardeşim.Ellerin dert görmesin.Kullanıcam.

    3. Arda Erakman dedi ki:

      Eyvallah Furkan’ım.

    Bir yanıt yazın

    E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

    Bunlar da hoşunuza gidebilir...