Ayo Bantu Saya Dengan Mendonate Via Trakteer
Donate Sekarang

Cara Membuat BxSlider Menggunakan Library JQuery

Share
Posted by:Posted at


Cara Membuat Sebuah BxSlider Menggunakan Library JQuery

Hallo soubat Info Tech-ku balik lagi yah bersama saya Chesta, maaf semuanya lama update konten terbaru ini bukan karna saya malas ngetik ini karna kemarin" ada urusan penting hehe. Untuk pembahasan kali ini saya bakal memberi pembelajaran coding nih genkk, yaitu cara Membuat Sebuah Slider Menggunakan Library JQuery. Sebelum memulai pembelajarannya boleh lah donate saya untuk semakin maju:) Terimahkasih jika sudah mendonate saya dan mari mulai belajarnya.

Apa Itu Slider Dan Bagaimana Fungsinya?

Slider atau Slideshow adalah sebuah fitur pada website yang dimana berfungsi untuk menampilkan gambar yang selalu berpindah pindah saat diklik atau digeser kesamping , slider sendiri sangat bagus jika seorang membuat situs gambar contohnya kaya situs yang didalamnya cuma menampilkan gambar untuk diberi ke orang yang mencari gambar tersebut ssst kita bahas slider bukan situs" gituan:v oke langsung saja kita ke caranya. 

Cara Pembuatan BxSlider

Oke cara pertama silahkan dulu masuk ke Aplikasi Editor Html kalian dan buat file index.html , setelah itu buat Sebuah kode html5 pada halaman index.html , setelah itu kalian buat sebuah kode penghubung css dan js pada bawah <head> atau diatas </head> pasti tau lah soubat Info Tech. 

See the Pen kode css dan js by ChestaDev (@ChestaDev) on CodePen.

Setalah soubat info tech memasukan penghubung css dan js ke index.htmlnya, soubat info tech buat lagi sebuah kode html seperti dibawah ini. sst masukan kodenya sama kaya head diatas tapi bedanya ini <body> Kode </body>

See the Pen Kode konten slider pada html by ChestaDev (@ChestaDev) on CodePen.

Fungsi dari kode html ini untuk menampilkan slidernya bisa dibilang badan dari halaman situs, sedang css adalah kulit dari situs untuk merapihkan sebuah tampilan kode htmlnya, dan js sebuah tulang untuk membantu kedua elemen ini ini cuma perumpamaan saya yah hehe:v.
Oke setelah itu masukan kode JavaScriptnya ikuti penarapannya, untuk Kode JavaScript masukkan diatas </body> ingat yah dipenutupan body.

See the Pen javascript by ChestaDev (@ChestaDev) on CodePen.

Setelah sudah merasukin ketiga kode tersebut coba kalian tes atau gabungin jadi satu, kalian juga bisa pahami begaimana cara kerja kode tersebut..

See the Pen javascript by ChestaDev (@ChestaDev) on CodePen.

Ini kode lengkapnya kalian tinggal copy yah dan untuk demonya bisa cek disini  Klik
Gimana Soubat Info Tech keren kan tampilannya silahkan request pelajaran berikutnya 

Untuk penjelasan kode saya taro disini.

Autocontrols

Bertujuan untuk menmbahkan kontrol yang memungkinkan pengguna untuk memulai dan menghentikan slideshow, secara otomatis ini disetel ke false.

Auto

Bertujuan untuk memulai slideshow otomatis bisa dibilang bergerak sendiri secara otomatis.

Pager

Bertujuan untuk menambah sebuah pager ke tampilan slideshow. 

Slidewidth

Bertujuan untuk  mengatur melebarkan tampilan slide.

Mode

Bertujuan untuk mengofigurasi transisi slide

Captions

Bertujuan untuk menampilkan judul pada slide, terletak dibawah slidenya. 

Speed

Bertujuan untuk mengofigurasi durasi waktu transisi slide, dan diatur dalam miliseconds. Contoh kita sudah menetapkan menjadi 1000, dan otomatis slide akan diputar setiap detik.

Terimah Kasih Semuanya untuk kali ini saya pamit dulu, dan jangan lupa donate. 

Post a Comment
Labels, , , , ,
Bukan siapa-siapa, cuma blogger pemula yang suka menyendiri:)

Comments

Donasi

Archive

Contact Form

Send