Backstretch: Arka plan slider

Jquery kütüphanesi kullanarak yapılmış, çok basit ve kullanışlı, responsive özelliğine sahip tam ekran çalışan slider. İsterseniz belirli bir div yada elementin içine tanımlayarak birden fazla alanda arka plan slider olarak kullanabiliyorsunuz.

Arka planda tek görsel kullanmak isterseniz:

/*
 * At its core, Backstretch is a one-line plugin.
 * Just pass in the path to an image, and you're done.
 */

  $.backstretch("http://dl.dropbox.com/u/515046/www/garfield-interior.jpg");

 Arka planda Slide Show kullanmak isterseniz

/*
 * Here is an example of how to use Backstretch as a slideshow.
 * Just pass in an array of images, and optionally a duration and fade value.
 */

  // Duration is the amount of time in between slides,
  // and fade is value that determines how quickly the next image will fade in
  $.backstretch([
      "http://dl.dropbox.com/u/515046/www/outside.jpg"
    , "http://dl.dropbox.com/u/515046/www/garfield-interior.jpg"
    , "http://dl.dropbox.com/u/515046/www/cheers.jpg"
  ], {duration: 3000, fade: 750});

 Görseller arası tıklama ile geçiş yapmak isterseniz

/*
 * You can easily attach Backstretch to jQuery events, like click
 * 
 * Click the buttons above to see the background image change
 */
 
  $("#outside").click(function(e) {
    e.preventDefault();
    $.backstretch('http://dl.dropbox.com/u/515046/www/outside.jpg');
  });

  $("#cheers").click(function(e) {
    e.preventDefault();
    $.backstretch('http://dl.dropbox.com/u/515046/www/cheers.jpg');
  });

Herhangi bir elementin arka planında Slide Show yada tek görsel kullanmak isterseniz

/*
 * If you'd like, you can attach Backstretch to any block-level element. 
 * For example, this demo.
 */

  $("#demo").backstretch("http://dl.dropbox.com/u/515046/www/garfield-interior.jpg");

Demo – Ücretsiz İndir – GitHub