css-logoHallo teman-teman, apa kabarnya ? Semoga baik-baik saja yah, amin.

Ketemu lagi dengan saya, pada kesempatan kali ini saya akan berbagi artikel mengenai cara membuat slider sederhana dengan CSS3 dan jQuery, nah teman-teman pasti penasaran kan seperti apa slidernya, daripada penasaran langsung saja yuk kita praktikan.

  1. Seperti biasa, teman-teman buka dulu text editornya masing-masing.
  2. Kemudian, teman-teman siapkan dulu beberapa foto atau gambar buat slidernya.
  3. Kalo sudah, coba teman-teman ketikan script HTML berikut:

html

4. Selanjutnya kita buat dulu script CSSnya, silahkan ketikan script berikut diantara tag head:

css

5. Kalo sudah kita lanjut ke bagian script javascript nya, teman-teman silahkan copy scriptnya di  http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js, nah nanti simpan dalam bentuk .js

6. Setelah itu kita panggil script yang tadi kita copy.

7. Setelah itu kita lanjut untuk script javascript nya lagi, coba ketikan lagi script berikut di bawah script js sebelumnya, nanti hasilnya seperti ini:

js

8. Nah nanti seperti diatas, untuk script js nya. kemudian disimpan.

9. Setelah itu coba teman-teman buka dobrowsernya masing-masing dan lihat hasilnya.

10. Selesai.

Gimana teman-teman keren kan. Baiklah cukup sekian artikel kali ini semoga artikel ini bisa bermanfaat, amin. Sampai ketemu dilain kesempatan 🙂