ResponsiveSlides

Hem masaüstü hem de mobil cihazlarla uyumlu esnek bir yapıya sahip bir uygulama. Siz tarayıcıyı küçültmeye başladığınız andan itibaren resimler ve açıklamalar da otomatik boyut değiştiriyorlar. Kimileri mobil cihazlarda bu tür bileşenleri devre dışı bırakmayı tercih ederler düzgün çalışmadıklarından dolayı. Cep telefonları için de sorunsuz bir şekilde çalıştığından dolayı bu gibi önlemler almanıza gerek kalmıyor.

Viljami Salminen‘in yaptığı bu örnek 1kb kadar çok ufak boyutu sayesinde sunucunuzda neredeyse hiç yer kaplamayacak. Otomatik değişen, ileri-geri butonları ile değişen ve alt kısma eklenmiş olan numaralara tıklayarak kullanabileceğiniz 3 adet demosu bulunuyor. Bu özelliklerinin yanında bir de kullanmanız için bir kaç tane parametre eklenmiş. Zaman, rastgele, auto, maximum genşlik gibi seçenekler ile kendinize özgü tasarımlar yapmanız mümkün.

Kullanım

• Head etiketleri  arasına eklemeniz  gereken bölümler.

Js dosya adresleri :

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
 <script src="../responsiveslides.min.js"></script>

Stil : 

#slides {
  position: relative;
  overflow: hidden;
  max-width: 800px;
  width: 100%;
  }

img {
  position: absolute;
  height: inherit;
  width: 100%;
  left: 0;
  top: 0;
  }

.img_visible {
  position: relative;
  float: left;
  }

Her 3 demo için JavaScript :

  <script>
    $(function () {

      // Slideshow 1
      $("#slider1").responsiveSlides({
        maxwidth: 800,
        speed: 800
      });

      // Slideshow 2
      $("#slider2").responsiveSlides({
        auto: false,
        pager: true,
        speed: 300,
        maxwidth: 540
      });

      // Slideshow 3
      $("#slider3").responsiveSlides({
        auto: false,
        pager: false,
        nav: true,
        speed: 500,
        namespace: "callbacks",
        before: function () {
          $('.events').append("<li>before event fired.</li>");
        },
        after: function () {
          $('.events').append("<li>after event fired.</li>");
        }
      });

    });
  </script>

Bütün parametreler : 

$("#slides").responsiveSlides({
  auto: true,             // Boolean: Animate automatically, true or false
  speed: 1000,            // Integer: Speed of the transition, in milliseconds
  timeout: 4000,          // Integer: Time between slide transitions, in milliseconds
  pager: false,           // Boolean: Show pager, true or false
  nav: false,             // Boolean: Show navigation, true or false
  prevText: "Previous",   // String: Text for the "previous" button
  nextText: "Next",       // String: Text for the "next" button
  maxwidth: "none",       // Integer: Max-width of the slideshow, in pixels
  controls: "",           // Selector: Where controls should be appended to
  namespace: "rslides"    // String: change the default namespace used
});

• Body  etiketleri arasına eklenmesi gereken bölüm.

Her  3 demonun html kodu :

    <!-- Slideshow 1 -->
    <ul class="rslides" id="slider1">
      <li><img src="1.jpg" alt="" /></li>
      <li><img src="2.jpg" alt="" /></li>
      <li><img src="3.jpg" alt="" /></li>
    </ul>

    <!-- Slideshow 2 -->
    <ul class="rslides" id="slider2">
      <li><a href="#"><img src="1.jpg" alt="" /></a></li>
      <li><a href="#"><img src="2.jpg" alt="" /></a></li>
      <li><a href="#"><img src="3.jpg" alt="" /></a></li>
    </ul>

    <!-- Slideshow 2 -->
    <div class="callbacks_container">
      <ul class="rslides" id="slider3">
        <li>
          <img src="1.jpg" alt="" />
          <p class="caption">This is a caption</p>
        </li>
        <li>
          <img src="2.jpg" alt="" />
          <p class="caption">This is another caption</p>
        </li>
        <li>
          <img src="3.jpg" alt="" />
          <p class="caption">The third caption</p>
        </li>
      </ul>
    </div>