jQuery Plugin : Nivo Slider 3.1

Nivo Slider adalah salah satu Plugin jQuery  yang bersifat open source untuk image slider yang cukup popular dan gratis digunakan,  Anda dapat mendownload plugin jQuery image slider ini di (http://nivo.dev7studios.com/) . Saat postingan ini ditulis Versi terbaru dari Nivo Slider adalah Nivo Slider 3.1  Kelebihan Nivo Slider ini selain mudah diimplementasikan juga menggunakan 16 macam transition effects yang terus berganti-ganti seacara random  saat gambar berpindah-pindah dari gambar yang satu ke gambar yang lain. Fitur yang terdapat dari Nivo Slider juga cukup lengkap seperti  direction navigasi, Kontrol navigasi dengan gambar thumbnail atau hanya tanda point saja, dan menampilkan teks untuk keterangan pada gambarnya. 


 Lihat Demo

Untuk menggunakan Plugin Jquery Nivo Slider 3.1 , Anda harus menggunakan minimum jQuery v1.4+ dan web browser yang mendukung seperti Internet Explorer v7+, Firefox v3+, Google Chrome v4+, Safari v4+, Opera v10+. Untuk mencobanya anda membutuhkan file Jquery, Nivo Slider script, dan Nivo Slider CSS, Semua sudah anda dapatkan dalam satu paket ketika anda mendownloadnya secara gratis di situs resminya.

Cara menggunakan plugin ini juga tidak terlalu sulit, pertama adalah memanggil 3 file CSS dari Nivo Slider dan masukan di dalam tag <Head>

<link rel="stylesheet" href="../themes/default/default.css" type="text/css" media="screen" />
<link rel="stylesheet" href="../nivo-slider.css" type="text/css" media="screen" />
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />

Untuk mengatur ukuran bagian slider gambar anda dapat membuka file nivo-slider.css kemudian pada bagian class nivoSlider ubahlah ukuran width-nya. Anda juga dapat mengatur sendiri tampilan image slider dengan memodifikasi file-file CSS tersebut.

Selanjutnya adalah  memanggil jQuery 1.7.1 dan plugin jQuery Nivo Slider 3.1 , Scriptnya adalah seperti berikut :

<script type="text/javascript" src="scripts/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="../jquery.nivo.slider.pack.js"></script>


Anda juga perlu memanggil scriptnya menggunakan fungsi $(window).load()

<script type="text/javascript">
    $(window).load(function() {
        $('#slider').nivoSlider();
    });
</script>

Jangan sampai salah menulis lokasi letak file-file jquery tersebut karena jika salah Image slider tidak akan berjalan sebagaimana mestinya. Script-script diatas dapat Anda letakan di dalam tag <Head><.Head>  atau di dalam Tag <Body></Body>  ,

Setelah memanggil file CSS dan jQuery 1.7.1 serta plugin jQuery Nivo Slider 3.1 , Kita tinggal membuat untuk bagian Body halaman HTML nya. 

<div class="slider-wrapper theme-default">
<div id="slider" class="nivoSlider">

<img src="images/spiderman.jpg" data-thumb="images/spiderman.jpg" alt="" />


<a href="#"><img src="images/alice.jpg" data-thumb="images/alice.jpg"  alt="" title=  "deskripsi gambar" /></a>

<img src="images/im.jpg" data-thumb="images/im.jpg" alt="" data-
transition="slideInLeft" />


<img src="images/kungfupanda.jpg" data-thumb="images/kungfupanda.jpg" 
alt="" title="#htmlcaption" />
</div>
<div id="htmlcaption" class="nivo-html-caption">
Contoh jika menggunakan teks atau caption<em>HTML</em>  berupa<a
href="#">link</a>.
</div>
</div>


Dapat dijelaskan pada script diatas terdapat 4 macam gambar yang akan muncul secara bergantian dengan effect transition random.  Gambar pertama adalah gambar spiderman.jpg kemudian alice.jpg yang akan muncul dengan title "deskripsi gambar", gambar ketiga adalah im.jpg khusus gambar ini akan muncul dengan effect transition slide dari kanan ke kiri karena data-transition menggunakan setingan slideInLeft . Dan gambar keempat adalah  kungfupanda.jpg , gambar ini menggunakan caption html sebagai deskripsinya yang berupa script-script html seperti link dan script html lainnya. Anda dapat mengatur gambar-gambar slider tersebut dengan gambar yang anda inginkan tentunya dengan ukuran yang telah di sesuaikan dengan ukuran wrap slider tersebut. Untuk lebih jelas dan melihat hasilnya Anda dapat membuka file demo.html dari Plugin Jquery Nivo Slider 3.1 di Web Browser.

Untuk setingan Image slider dari Plugin Jquery Nivo Slider 3.1  dapat anda atur di file jquery.nivo.slider.js dibaris paling bawah di bagian Default settings-nya, kemudian mengatur seperti effect transition-nya, kecepatan animasi, menampilkan dan menghilangkan direction Navigasi, kontrol navigasi , kontrol thumb navigasi, dll.

Berikut ini adalah effect-effect transition yang mampu di tampilkan Nivo Slider 3.1  

·      sliceDown
·      sliceDownLeft
·      sliceUp
·      sliceUpLeft
·      sliceUpDown
·      sliceUpDownLeft
·      fold
·      fade
·      random
·      slideInRight
·      slideInLeft
·      boxRandom
·      boxRain
·      boxRainReverse
·      boxRainGrow
·      boxRainGrowReverse


Share this

Related Posts

Previous
Next Post »

2 comments

comments
October 30, 2013 at 8:32 PM delete

Terimakasih artikelnya bermanfaat.

Reply
avatar
June 14, 2014 at 3:04 AM delete

Detail bangetz penjelasannya mas, jadi sangat mudah dipraktekkan, terima kasih ya aku coba sekarang nieh :)

Reply
avatar

Komentar disini ..