Tuesday, January 1, 2013

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.

7 comments:

Anonymous said...

Thanks untuk tuts-nya, gan.
Sekalian mau tanya, caranya ubah ukuran gimana ya? Ane udah buka javascriptnya kok jadi ribet ya? Nggak ada pengaturan ukuran.
Mohon dijawab, gan. Terima kasih (lagi) /shakehand

Andry Yunan said...

@AnonymousTidak usah mengoatk atik javascriptnya untuk merubah gambar. Cukup edit css nya saja dibagian
#slider-wrapper dan .nivoSlider
Rubah properti width sesuai kebutuhan agan.

Mawardi A Asja said...

Manfaat banget bro.. terus buat posting lagi...

Aulia Bali Tour said...

Belum begitu faham, tapi membuat penasaran, masih mengamati dulu, ditunggu postingan lainnya. Thanks

h.m. Idem said...

makasih,.,.,.,.,.,.,sip,.,.,.,.,,.,.

ruri zazili said...

kerenn uyy... :-)

denni rh said...

Link demo nya mungkin bisa di update gan. Mkasih gan sangat bermanfaat ilmunya.

Post a Comment

:) :(;):D;;-):-/:x:P:-*=((:-OX(:7B-):-S#:-S7:):((:)):|/:)=))O:-):-B=;I-)8-|L-):-a:-$[-(:O)8-}2:-P(:|=P~:-?#-o=D7:-SS@-):^o:-w7:P2):):-c:)]~X(:-h:-t8-7X_X:!!m/:-q:-bd^#(^Blog Thinker