Backstretch: Arka plan slider

backstretch-slideshow-jquery-plugin

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

Hakan Demirel

pcanalist.com kurucularından Hakan Demirel, özel bir şirkette Front-end Developer olarak çalışmakta. Twitter üzerinden @hakandemirel hesabını takip edebilir yada hakandemirel.com adresinden daha fazla bilgi alabilirsiniz.

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Yandex.Metrica