Halo teman-teman, jumpa lagi dengan saya. Pada artikel kemarin kita sudah belajar tentang bagaimana penggunaan fungsi dari Jquery, nah pada artikel ini kita akan membuat project sederhana yaitu Membuat Slide Head to Head Bola Dengan Jquery yang mana tampilannya akan kita gerakkan sesuai urutannya/perintahnya. Sering kita jumpai pada saat kita nonton bola muncul Head to Head antara pemain, nanti kita akan membuatnya dengan mengatur image dengan Jquery. Berikut gambaran yang nanti kita akan buat

membuat-slide-head-to-head-bola-dengan-jquery

Membuat Slide Head to Head Bola Dengan Jquery

Baik langsung saja kita praktekkan, teman-teman siapkan code editornya lalu pastekan script di bawah ini

Kemudian save dengan nama index.html, nah untuk gambar disesuaikan sendiri ya teman-teman atau bisa juga download di google.com. Langkah berikutnya kita atur css nya, bisa juga copy script di bawah ini

Yak pastekan script di atas ini di dalam tag <head> nya, dan juga tambahkan library Jquery di dalam tag <head>

membuat-slide-head-to-head-bola-dengan-jquery-1

Jika sudah tambahkan fungsi Jquery nya untuk membuat slide nya, teman-teman copy kan script di bawah ini

Lalu pastekan tepat di bawah nya

membuat-slide-head-to-head-bola-dengan-jquery-2

Kemudian save dan open di Browsernya,maka Membuat Slide Head to Head Bola Dengan Jquery sudah selesai di buat.

membuat-slide-head-to-head-bola-dengan-jquery

Membuat Slide Head to Head Bola Dengan Jquery

Pada tampilan browser di pojok kiri atas atau yang saya beri kotak warna merah sebagai pengendalinya, ketika di klik maka slide akan tampil sesuai urutannya dan klik selanjutnya slide akan menghilang sesuai urutannya juga. Cukup lumayan mudah bukan,,? Ini sebagai project sederhana untuk membuat slide bola, teman-teman boleh memodifikasinya sendiri ya supaya hasilnya lebih sempurna dan menarik. Oke mungkin sekian dulu di artikel kali ini sampai jumpa di artikel berikutnya. Semoga bermanfaat dan terimakasih