Assalamualaikum Wr. Wb.
Pada postingan kali ini, kita akan membahas tentang JQuery, lebih tepatnya pada salah satu fiturnya yaitu slider. Yang mana slider ini digunakan untuk berpindah slide yang berupa gambar dari satu gambar ke gambar yang lain.
Jquery, menyediakan banyak slider. Salah satunya adalah Bxslider ini. Yang mana Script kode dari Bxslider ini tidak lepas dari Jquery. Selain itu, tampilan Bxslider sangat responsive. Yang artinya tampilan slidernya bisa menyesuaikan ukuran berdasarkan layar perangkat yang mengakses website yang kita buat. Bukan hanya ukuran layar juga, tapi Bxslider juga bisa menyesuaikan ukurannya sendiri dengan tampilan CSS dan HTML yang sudah kita buat. Benar-benar fleksibel deh pokoknya.
Selain dari itu, Bxslider juga memiliki berbagai macam bentuk tema slide yang bisa kita pilih sendiri bahkan kita ubah sendiri. Untuk mempelajarinya juga tidak susah. Karena di tiap style atau tema slider yang kita mau sudah tersedia bentuk tema, bahkan ada beberapa script kode di tiap tema tersebut. Tinggal gunakan aja file CSSnya dan Jsnya beserta gambar kontrolnya, kemudian isi fungsinya. Maka dari itu, untuk mempelajari Bxslider ini tidaklah sulit.
Oke, mari kita mulai.
- Pertama, download dulu Jquerynya disini (http://jquery.com/).
2. Kemudian, buka web Bx slidernya klik aja disini http://bxslider.com/. Nanti akan tampil halaman seperti berikut.
3. Download aja file Bx slidernya, silahkan klik seperti tanda merah di bawah ini.
4. Extract aja filenya, copy foldernya dan satukan dalam sebuah folder. Bersamaan juga dengan file jquerynya. Disini saya buat folder namanya bx.
5. Pilih foto yang akan dipilih untuk jadi slidernya, masukkan dalam folder bx. Disini, gambarnya saya jadiin folder tersendiri biar rapi.
6. Buat file baru dalam format html, dan satukan dalam folder bx tadi. Simpan dengan nama index.html.
7. Buka index.html, kemudian buat script htmlnya. Selanjutnya pada tag <head></head> sisipkan perintah pemanggilan file JQuery dan Bxslider yang tadi kita download.
8. Selanjutnya, pada tag <head></head> di bawah pemanggilan Jquery dan Bx slidernya.Silakan sisipkan kode javascript berikut.
9. Kemudian pada tag <body></body>, sisipkan kode berikut untuk membuat daftar gambar yang nanti akan muncul.
10. Dan beginilah, hasil akhirnya.
