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

Paylaş

Furkan Özden

Blog dünyası ile 2009 yılında tanıştım. Bloğumda haftada en az bir yazı yayımlıyorum. Yazdığım yazıları beğendiyseniz beni Twitter'dan (@frknzdn) takip edebilirsiniz. Daha fazlası için hakkımda sayfasını ziyaret edin.

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 cevap yazın

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

Bunlar da hoşunuza gidebilir...