jQuery Talk: eSDhee-Slider v1.0, Plugin for Image Slider

Jika dalam artikel sebelumnya yang berjudul jQuery Talk: Image Slider, image slider yang dibuat tidak menggunakan plugin sehingga sedikit sulit dipahami oleh user. Maka dalam tutorial kali ini saya mencoba membuat plugin image slider sederhana tanpa ada image berukuran besarnya, disini hanya menampilkan thumbnail dari slider.

Untuk mendownload plugin ini, silahkan klik disini.

Untuk melihat pengimplementasian plugin ini, silahkan klik disini.

Dalam penggunaan plugin ini, user tidak harus memahami seluruh code yang ada didalamnya. User hanya perlu sedikit menambahkan deskripsi dari image slider yang ingin dibuat. contohnya code pada baris-baris ini :

var numberImages=10; //number of images used in this slider
var numberVisibleImages=4; //number of images seen
var widthOfImage=110; // Size of image + 20 (padding left and right)

Untuk menjalankan plugin dengan baik, user harus mengisi 3 variable diatas secara benar. Jika tidak, maka slider tidak akan berjalan dengan baik. Pendeskripsian image slider tidak hanya pada 3 baris code jQuery diatas saja. Adapun code css dan html yang harus diubah oleh user. seperti “width” yang harus dikalkulkasi untuk lebar dari keseluruhan image, image yang terlihat, dan juga screen dimana screen ini berfungsi sebagai interface kepada “end user”.
Untuk lebih jelasnya, silahkan download plugin disini. Didalamnya sudah tersedia jQuery code, css code dan html basic code berikut semua penjelasan kepada user yang ingin memakai plugin ini.

Anda bisa mendukung saya untuk tetap melakukan update tutorial dengan cara mem-follow blog saya, atau mem-follow twitter saya disini, bisa juga dengan meninggalkan komentar dan atau me-request tutorial yang anda inginkan. Best regards, eSDhee

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s