Membuat isi website bergerak dengan jCarousel Lite

Contoh Kasus:

Peserta kursus CodeIgniter menginginkan tampilan isi website yang bergerak seperti terlihat pada http://pasarbalubur.com dimana gambarnya seperti dibawah ini:

Pertanyaan:

Bagaimana membuatnya … ?

Jawaban:

Kita bisa menggunakan jCarousel lite, lihat demonya http://www.gmarwaha.com/jquery/jcarousellite/?#demo

Untuk membuatnya maka ikutilah langkah dibawah ini:

Sehingga folder jcarousel terlihat seperti dibawah ini:

Sekarang buatlah satu file HTML dalam folder jcarousel dengan nama jcareousel.html dan isi dengan kode dibawah ini:

<html>
<head>
<script type=”text/javascript” src=”jquery.js”></script>
<script type=”text/javascript” src=”jcareousel.js”></script>
<script type=”text/javascript”>
$(function() {
$(“.anyClass”).jCarouselLite({
btnNext: “.next”,
btnPrev: “.prev”,
auto:800,
speed:800
});
});
</script>
</head>
<body>
<button class=”prev”><<</button>
<button class=”next”>>></button>
<div class=”anyClass”>
<ul>
<li><img src=”images/gambar1.png” alt=”” width=”100″ height=”100″ ></li>
<li><img src=”images/gambar2.png” alt=”” width=”100″ height=”100″ ></li>
<li><img src=”images/gambar3.png” alt=”” width=”100″ height=”100″ ></li>
<li><img src=”images/gambar4.png” alt=”” width=”100″ height=”100″ ></li>
</ul>
</div>
</body>
</html>
Keterangan:
  • $(function(), kode ini berarti bahwa kode yang berada dibawahnya akan dieksekusi setelah dokumen selesai loading.
  • $(“.anyClass”).jCarouselLite, Kode ini berarti JQuery mencari tag HTML yang mempunyai class “anyClass” yaitu kode ‘<div class=”anyClass”>’ lalu JQuery memberikannya fungsi JCareouselLite.

Hasil:

Sekarang kamu eksekusi file jcareousel.html melalui browsermu dan lihat apakah gambarnya sudah bergerak.


Jika tutorial ini bermanfaat silahkan katakan ‘Terima Kasih Fahmi Basya Kartapura’.

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *