Membuat Image Slider Cantik Dengan Nivo Slider

Image slider atau photo slider atau slider..halah kebanyakan atau -_-", langsung aja deh, image slider memang salah satu upaya untuk mempercantik sebuah desain web atau bahkan untuk menunjang interface pada sebuah tampilan website. Selain mempercantik tampilan, slider juga sekaligus berfungsi sebagai navigasi  interaktif sebagai daya tarik visitor untuk mengunjungi konten yang di link dalamimage slider tersebut.

Lalu, bagaimana sih membuat image slider itu? Susah tidak ya?
Emmm...kalau masalah mudah atau tidak itu tergantung kitanya mau belajar atau tidak..hehe! yang jelas kita harus sedikit tahu atau paling tidak mengerti sedikit mengenai bahasa HTML.

Oke deh langsung saja kita praktek membuat image slider untuk dipasang disebuah template blog atau halaman web.
Sebelum dimulai alangkah baiknya Anda melihat image slider yang nanti akan kita buat, lihat preview image slider yang saya terapkan di web saya yang baru, Klik Disini untuk melihat demonya.

Langkah yang pertama yang harus kita lakukan adalah menyiapkan komponen-komponenya.

• jquery.nivo.slider.js ( plugin javascript dari nivo slider )
• jquery-1.6.1.min.js ( Plugin JQuery )
• CSS
• URL foto yang ingin ditampilkan pada slider

Untuk plugin JQuery dan CSS nya Anda bisa ngelink saja dari web saya, untuk memperpendek penulisan kode. Caranya sebagai berikut :

Taruh kode berikut di antara tag header,

<link rel="stylesheet" href="http://jogja-handycraft.info//slider/style/style.css" type="text/css" />
<script type="text/javascript" src="http://jogja-handycraft.info/slider/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="http://jogja-handycraft.info/slider/jquery.nivo.slider.js"></script>

Kemudian taruh kode berikut diantara tag body,

<div id="slider" class="nivoSlider">
 <a href="#"><img src="http://jogja-handycraft.info/slider/images/1.jpg" alt="Jewelry Box Open Side" title="Jewelry Box Open Side" /></a> 
<a href="#"><img src="http://jogja-handycraft.info/slider/images/2.jpg" alt="Red Jewelry Box" title="Red Jewelry Box" /></a>
 <a href="#"><img src="http://jogja-handycraft.info/slider/images/3.jpg" alt="Red Jewelry Oval Box" title="Red Jewelry Oval Box" /></a>
 <a href="#"><img src="http://jogja-handycraft.info/slider/images/4.jpg" alt="Pink Beaty Jewelry Box" title="Pink Beaty Jewelry Box" /></a> 
<a href="#"><img src="http://jogja-handycraft.info/slider/images/5.jpg" alt="Tray Set Parcel Hari Raya" title="Tray Set Parcel Hari Raya" /></a>
  </div>

 <script type="text/javascript">
     $(window).load(function() {
     $('#slider').nivoSlider({
     pauseTime: 5000,
     startSlide: 3 }); });
 </script>

Keterangan :
Ganti tulisan yang saya kasih blok warna merah dengan URL tujuan.
Ganti tulisan yang saya kasih blok warna hijau dengan URL gambar.
Ganti tulisan yang saya kasih blok warna kuning dengan Judul dari gambar tersebut.

Simpan, dan lihat hasilnya. Oh iya, slider ini bisa diaplikasikan disemua komponen website ataupun template blog, termasuk pada blogger. Kelebihan dari sider ini selain ringan juga mempunyai slide effect yang indah. So,selamat bereksplorasi.

Lihat Demo.

Tweet