Skill Level
No skill level
Categories
Freebies
Reading Time
3 minutes, 7 seconds
Technology
JavaScript
Framework
No framework
Library
jQuery
Slidesbg.js – Free JQuery SlideShow Plugin

Slidesbg.js merupakan plugin jQuery untuk membuat background slideshow  dari berbagai gambar yang kamu tentukan.Plugin ini memiliki beberapa fitur seperti: parallax scroll, custom nav dan yang lainnya. Selain mudah digunakan, plugin ini bisa didownload secara gratis di github atau di situs resminya dan harus dijalankan dengan library jQuery pastinya.  Penasaran? scroll kebawah bro!

Fitur

– Mudah digunakan
– Full Responsive
– Fullscreen Mode- Keyboard Controller
– Multiple Slider

Download

Github
Official Website

Bagaimana cara menggunakannya?

1. Buat folder baru dengan nama slidesbg-js di dalam folder website kamu lalu ekstrak hasil file yang sudah didownload tadi dan masukan file hasil ekstrak kedalam folder tersebut.

2. Buat dokumen baru atau buka dokumen yang ingin diberikan slider.

3. Letakan beberapa baris kode berikut sebelum tag </head>

<link href="slidesbg-js/slidesbg.css" rel="stylesheet">
<script src="//code.jquery.com/jquery-1.12.1.min.js"></script>
<script src="slidesbg-js/slidesbg.min.js"></script>

4. Kemudian letakan lagi beberapa baris kode berikut  dibawah elemen yang akan dijadikan slider.

<script>
$(document).ready(function(){
// gambar yang akan dijadikan slider (full path)
var slides = [
  "image1.jpg",
  "image2.jpg "
];

// ubah #myheader dengan id/class dari element anda
$("#myheader").slidesbg({
  dataSlide: slides
});
});
</script>

5. Sebagai contoh (full code):

<!DOCTYPE html>
<html>
<head>
  <title>Slidesbg.js</title>
  <script type="text/javascript" src="//code.jquery.com/jquery-1.12.1.min.js"></script>
  <script type="text/javascript" src="slidesbg-js/slidesbg.js"></script>
  <link rel="stylesheet" type="text/css" href="slidesbg-js/slidesbg.css">
  <style type="text/css">
  html, body {
    margin: 0;
  }
  .header {
    height: 100vh;
    background: #ddd;
  }
  </style>
</head>
<body>
<div class="header"></div>

<script>
  var sliders = [
    "img/slide1.jpg",
    "img/slide2.jpg"
  ];
  $(".header").slidesbg({
    dataSlide: sliders
  });
</script>
</body>
</html>

6. Selesai

Untuk demo dan opsi lainnya dapat dilihat disini.

Plugin jQuery ini dibuat oleh siapa?

Plugin ini dibuat oleh Muhamad Nauval Azhar yaitu saya sendiri 😀 dan dipublikasikan melalui Multinity.

Lisensi

MIT LICENSE

Final Words

Semoga plugin yang saya buat ini bisa bermanfaat untuk anda dan membuat website anda menjadi lebih menarik. Terimakasih dan sampai jumpa diartikel berikutnya.

Topik:

Baca juga post berikut

Mempelajari Animasi CSS3

Implementasi HTML5 Geolocation, Mendetek...

Muhamad Nauval Azhar
3 years ago  •  Posted by
Muhamad Nauval Azhar
Junior Programmer

lorem ipsum dolor sit amet

Dapatkan notifikasi untuk setiap artikel baru dan jadilah yang pertama tahu!