Cara Menggunakan Plugin Nivo Slider

Nivo Slider adalah sebuah plugin jquery yang berfungsi untuk menampilkan sebuah slide gambar atau konten tertentu. Nivo slider sendiri merupakan sebuah plugin slider yang digunakan untuk website berbasis wordpress dengan banyak sekali pengaturan yang cukup menarik dan tema yang bervariasi. bagi kalian yang menggunakan wordpress bisa lihat plugin nya pada link berikut

Nivo Slider Wordpress

Jika kalian pengembang tampilan website atau web designer maka kalian pasti ingin mengetahui bagaimana cara menerapkan plugin Nivo slider pada halaman website yang kalian buat secara manual. Untuk lebih jelasnya sekarang kita akan coba membuat sebuah halaman website menggunakan plugin jquery nivo slider. Berikut adalah langkah langkahnya:

Download paket zip plugin jquery nivo slider pada link github nya.

https://github.com/Codeinwp/Nivo-Slider-jQuery/archive/master.zip

Selanjutnya ekstrak pada folder project kalian

Lali sekarang kita siapkan template basic html seperti ini dengan tulisan yang berwarna merah disesuaikan dengan letak file yang telah kalian download

<!DOCTYPE html>
<head>
    <title>Penggunaan Nivo Slider</title>
    <link rel="stylesheet" href="nivo-slider.css" type="text/css" />  
    <link rel="stylesheet" href="themes/default/default.css" type="text/css" />  
</head>
<body>
    <div class="container">

    </div>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js" type="text/javascript"></script>
    <script src="jquery.nivo.slider.pack.js" type="text/javascript"></script>
</body>
</html>

selanjutnya kita buat struktur html di dalam container untuk menampilkan slider yang ada seperti berikut.

    <div class="slider-wrapper theme-default">
        <div class="ribbon"></div>
        <div id="slider1" class="nivoSlider">     
            <img src="images/slide1.jpg" alt="" />      
            <img src="images/slide2.jpg" alt="" title="ini contoh penerapan nivo slider" />     
            <img src="images/slide3.jpg" alt="" />
        </div>
    </div>

Pada struktur diatas terdapat sebuah class bernama theme-default, class tersebut adalah salah satu class theme yang bisa digunakan sesuai tema yang kita gunakan.

Selanjutnya kita buat baris javascript untuk mengaktifkan plugin nivo slider tersebut dengan baris kode berikut:

$(window).on('load', function() {
        $('#slider1').nivoSlider();
    });

Pada baris javascript tersebut terdapat selector slider1 yang mengacu kepada <div id="slider1" yang telah kita buat pada struktur html slidernya. Dengan begitu seharusnya plugin nivo slider sudah bisa berjalan dengan baik. Baiklah teman-teman demikian artikel kali ini yang membahas tentang cara menggunakan plugin nivo slider. Semoga bermanfaat.