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...