Cara Membuat Background Slideshow pada Website dengan JQuery

27 Desember 2020 | Kategori : Tutorial

Haloo sobat semua, tak terasa sebentar lagi kita sudah berganti tahun ya hehe.. pada kesempatan kali ini saya akan berbagi tutorial bagaimana cara membuat background pada sebuah website mempunyai efek slideshow dengan JQuery Backstretch.

slideshow(1).png

Apa itu JQuery Backstretch ?

JQuery Backstretch merupakan sebuah library yang memungkinkan kita untuk menambahkan gambar background yang dapat diubah ukurannya secara dinamis maupun background dengan kemampuan slideshow ke dalam sebuah halaman maupun sebuah elemen pada website yang kita bangun dengan mudah.

Bagaimana cara menggunakan Jquery Backstretch?

Baik sobat tidak usah berlama-lama lagi, kita langsung saja ke inti postingan kali ini ya. Namun sebelum itu, silahkan sobat unduh terlebih dahulu library yang dibutuhkan ya.

  1. Jquery
  2. Jquery Backstretch

Jika sudah silahkan sobat buat sebuah folder untuk projectnya, kemudian buat lagi sebuah folder assets di dalam folder project tadi. Setelah itu silahkan sobat copy kedua library tersebut ke dalam folder assets yang sudah sobat buat tadi.

Setelah itu, silahkan sobat siapkan beberapa file gambar yang akan sobat gunakan sebagai backgroundnya dan letakkan di folder assets tadi ya

Setelah itu silahkan sobat buat sebuah file html di folder project (diluar folder assets ya) dan silahkan ketikkan script di bawah ini kedalam file html tersebut :

Kemudian simpan dan silahkan sobat jalankan. Oh iya untuk nama dan ekstensi gambar silahkan sobat sesuaikan ya dengan nama dan ekstensi gambar yang sudah sobat persiapkan tadi.

Apakah efek transisinya cuma itu saja?

Jquery Backstretch menyediakan beberapa efek yang bisa sobat pilih diantaranya :

  • 'fade'
  • 'fade_in_out' / 'fadeInOut'
  • 'push_left' / 'pushLeft'
  • 'push_right' / 'pushRight'
  • 'push_up' / 'pushUp'
  • 'push_down' / 'pushDown'
  • 'cover_left' / 'coverLeft'
  • 'cover_right' / 'coverRight'
  • 'cover_up' / 'coverUp'
  • 'cover_down' / 'coverDown'

Bagi sobat yang tidak ingin repot-repot membuat filenya, sobat bisa mengunduh contohnya melalui tombol di bawah ini :

Baik sobat saya rasa cukup sekian tutorial Cara membuat background slideshow dengan Jquery Backstretch kali ini, semoga bisa bermanfaat buat sobat semua ya..