Download MP3

Cara Membuat jCarousel Dengan jQuery

Diposkan oleh Hery Prasetyo Thursday, May 27, 2010
بسم الله الرحمن الرحيم

jCarousel bisa di gunakan pada banyak hal. salah satunya adalah foto gallery. menggunakan sedikit tempat untuk memasang banyak gambar atau content.

Cara Membuat jCarousel Dengan jQuery
Dengan menggunakan jQuery yang cenderung lebih ringan dari pada javascript yang lainnya, menjadikan jCarousel lebih multi fungsi.

Silahkan lihat demo jCarousel pada link berikut :


Cara Membuat jCarousel Dengan jQuery adalah sebagai berikut :

- Silahkan login keBlogger dengan account anda.
- Pergi Ke "Tata Letak" kemudian "Edit HTML".
- Gunakan jQuery versi 1.4.2, copy paste code berikut dan letakkan di <head> :

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>

- Copy paste code berikut dan letakkan dibawah code diatas :

<script src='http://hapiajavascript.googlecode.com/files/jquery.jcarousel.min.js' type='text/javascript'/>
<script>

jQuery(document).ready(function() {
jQuery(&#39;#mycarousel&#39;).jcarousel();
});

</script>

- copy code CSS berikut dan pastekan diatas ]]></b:skin> :

.jcarousel-skin-tango .jcarousel-container {
-moz-border-radius: 10px;
background: #f0f0f0;
border: 1px solid #333;
}

.jcarousel-skin-tango .jcarousel-container-horizontal {
width: 245px;
padding: 20px 40px;
}

.jcarousel-skin-tango .jcarousel-clip-horizontal {
width: 245px;
height: 75px;
}

.jcarousel-skin-tango .jcarousel-item {
width: 75px;
height: 75px;
}

.jcarousel-skin-tango .jcarousel-item-horizontal {
margin-right: 10px;
}

.jcarousel-skin-tango .jcarousel-item-placeholder {
background: #fff;
color: #000;
}

/**
* Horizontal Buttons
*/
.jcarousel-skin-tango .jcarousel-next-horizontal {
position: absolute;
top: 43px;
right: 5px;
width: 32px;
height: 32px;
cursor: pointer;
background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpmhsmBBDjYOWbCpyslhqedI7B9tFU5OtciK6G9-LtIRGGpdXjXDSvVc24mXYlqQLi7PtvI8EU11Vu_TjJT4qLlIHMNORnQGcCiza6BPbdww5EJaDU2wEaa-2qp2YtpfNeZldtylBT5iU/s1600/next-horizontal.png) no-repeat 0 0;
}

.jcarousel-skin-tango .jcarousel-next-horizontal:hover {
background-position: -32px 0;
}

.jcarousel-skin-tango .jcarousel-next-horizontal:active {
background-position: -64px 0;
}

.jcarousel-skin-tango .jcarousel-next-disabled-horizontal,
.jcarousel-skin-tango .jcarousel-next-disabled-horizontal:hover,
.jcarousel-skin-tango .jcarousel-next-disabled-horizontal:active {
cursor: default;
background-position: -96px 0;
}

.jcarousel-skin-tango .jcarousel-prev-horizontal {
position: absolute;
top: 43px;
left: 5px;
width: 32px;
height: 32px;
cursor: pointer;
background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg51IeAhbF-fi1wtKF6wFuO7qhhi2cvqQhgQHU87eNfR-yfb24VJq8xFa92DIg_hI3f2pvq8450pqht1YS-u5KjmFkv8LhNe-GTItiT3Swtz3h4e4udZKWd9WfjhIqyNM_cM2Shr6BMqk0/s1600/prev-horizontal.png) no-repeat 0 0;
}

.jcarousel-skin-tango .jcarousel-prev-horizontal:hover {
background-position: -32px 0;
}

.jcarousel-skin-tango .jcarousel-prev-horizontal:active {
background-position: -64px 0;
}

.jcarousel-skin-tango .jcarousel-prev-disabled-horizontal,
.jcarousel-skin-tango .jcarousel-prev-disabled-horizontal:hover,
.jcarousel-skin-tango .jcarousel-prev-disabled-horizontal:active {
cursor: default;
background-position: -96px 0;
}

- Simpan Template.

- Letakkan code berikut di tempat yang anda inginkan :

<div class="jcarousel-skin-tango"><div class="jcarousel-container jcarousel-container-horizontal" style="position: relative; display: block;"><div class="jcarousel-clip jcarousel-clip-horizontal" style="overflow: hidden; position: relative;"><ul class="jcarousel-list jcarousel-list-horizontal" id="mycarousel" style="overflow: hidden; position: relative; top: 0px; left: 0px; margin: 0px; padding: 0px; width: 850px;"><li><img width="75" height="75" alt="" src="http://LINK-GAMBAR-ANDA.jpg"></li><li><img width="75" height="75" alt="" src="http://LINK-GAMBAR-ANDA.jpg"></li><li><img width="75" height="75" alt="" src="http://LINK-GAMBAR-ANDA.jpg"></li><li><img width="75" height="75" alt="" src="http://LINK-GAMBAR-ANDA.jpg"></li><li><img width="75" height="75" alt="" src="http://LINK-GAMBAR-ANDA.jpg"></li><li><img width="75" height="75" alt="" src="http://LINK-GAMBAR-ANDA.jpg"></li><li><img width="75" height="75" alt="" src="http://LINK-GAMBAR-ANDA.jpg"></li></ul></div><div class="jcarousel-prev jcarousel-prev-horizontal jcarousel-prev-disabled jcarousel-prev-disabled-horizontal" style="display: block;" disabled="true"></div><div class="jcarousel-next jcarousel-next-horizontal" style="display: block;" disabled="false"></div></div></div>

# Pada code di atas ini disediakan 7 link gambar. silahkan anda tambah dengan perintah <li><img width="75" height="75" alt="" src="http://LINK-GAMBAR-ANDA.jpg"></li>.
# Lebar dan tinggi gambar pada tampilan adalah 75 pixel.

Untuk tutorial aslinya silahkan kunjungi http://sorgalla.com/projects/jcarousel/.
Selamat mencoba dan happy blogging.


Jika postingan ini dirasa berguna bagi yang lain. silahkan share untuk berbagi.

Dapatkan Update Terbaru Dari HAPIA Mesir, Masukan Email Anda :

HAPIA Mesir Readers

Bookmark and Share

Direkomendasikan Untuk Dibaca :

33 Responses to Cara Membuat jCarousel Dengan jQuery

  1. Rock Says:
  2. jQuery lebih ringan dari pada javascript to sob? Baru tau aku...

     
  3. Assalamuallikum Mas Hapia . . sy mau tny nih, kalau jCarousel dipasang, kira2 loading blog tambah berat ngga Mas . . . sy mau coba diblog sy mbo nanti mlh tambah berat . . ..

    Wassalam

     
  4. HAPIA Mesir Says:
  5. Damar- Blog Tips@ waalaikum salam

    untuk nambah berat pa g nya itu lebih ke jumlah gambarnya. script atw jQuery itu ringan ketika hostingnya juga bagus. dan hosting yg saya gunakan adalah dari google.

     
  6. wah !!! keren nih, sy coba dulu ya sob...

     
  7. denadnan Says:
  8. semakin mantap aja nih gan... salam blogger.

     
  9. wah panjang banget ....
    tapi makasih banyak ya infonya...

     
  10. NURA Says:
  11. salam sobat
    lebih ringan daripada javascript,, wah sip
    saya ingin mencoba buat jcorousel dengan jquery mas.

     
  12. makasih banyak infonya...
    salam kenal....

     
  13. Aryadevi Says:
  14. salam aja sobat ^__^

     
  15. kutukupret Says:
  16. jquery itu fungsinya buata apa ya?ingin tahu lebih jauh :)

     
  17. Darin Says:
  18. ditempatkan di bawah header pasti ciamik ya :D

    wah2 bisa dipertimbangkan nih :)
    thanks sharingnya.

     
  19. Ferdinand Says:
  20. Wah kayanya jquery lagi banyak yg make ya Sob hhe......bisa dicoba nie nanti....makasih ilmu'y Sob........Sukse slalu.....

     
  21. akhatam Says:
  22. Kereenn Masss...!!!Keep Blogging

     
  23. Rizkyzone Says:
  24. sahabat hapia mesir dah kembali bisa diakses nih, kangen rasanya

     
  25. nuansa pena Says:
  26. Lama gak berkunjung kesini, maaf!

     
  27. Segera kucoba!

     
  28. aura pelupa Says:
  29. Tutorial yang ok!

     
  30. Pak Tani Says:
  31. dah lama saya tak maen kesini...
    dah blognya makin keren aja sob...

     
  32. mas doyok Says:
  33. bagus mas
    tapi
    di saya gak ada tempatnya :D

     
  34. Si Gaptek Says:
  35. kayaknya sulit ni tuk buat kayak ginian.

     
  36. Anonymous Says:
  37. Pernah nyoba, tapi scriptnya eror. ketemu tutorial ini patut dicoba .siapa tau g error

     
  38. gayuh Says:
  39. jurus meringankan loading ni.. makasih ya bung share nya

     
  40. gayuh Says:
  41. dengan tips ini blog yg banyak gambarnya bisa jadi ringan dunk..

     
  42. Anonymous Says:
  43. "jQuery lebih ringan dari pada javascript?"..bukannya emang ajax.

     
  44. Unknown Says:
  45. kunjungan malam jumat sobat

     
  46. Agus BF Says:
  47. Boleh di uji coba kawan, apa kabar nih lama gak keep in touch? thanks for sharing

     
  48. makasih tips nya sob,..

     
  49. Unknown Says:
  50. ass ini share yang sangat bermanfaat. selain tampil lebih keren sepertinya scriptnya juga semakin ringan... syukron

     
  51. dudek-0212- Says:
  52. tambah ilmu... terimakasih mas.. ^^

     
  53. Unknown Says:
  54. artikel "Cara Membuat jCarousel Dengan jQuery dari HAPIA Mesir ini solusi yang baik untuk temen blogger yang suka upload foto semacam gallerry.
    syukron dah dishare

     
  55. Unknown Says:
  56. datang kembalimencai update terbaru daro hapia mesir yang sangat dibutuhkan oleh rekan blogger.. slm

     
  57. Harun Ar Says:
  58. Hmmm...., Mantab banget... Mas..

     
  59. medan Says:
  60. Nice info

     

Post a Comment