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>