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

• ResponsiveSlides.js · Responsive jQuery Slider & Slideshow
• viljamis/ResponsiveSlides.js · GitHub
• Viljami Salminen · Responsive Design

Paylaş