ResponsiveSlides

By

ResponsiveSli

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 :

 
 

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 :

  

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 :

    
    
  • This is a caption

  • This is another caption

  • The third caption

 



Leave a Comment

Your email address will not be published.

You may also like

Trend