Cara Memasang Image Slideshow Nivo Slider

Memasang Image Slideshow – Bagi pemula yang ingin belajar membuat website biasanya sering bingung, bagaimana sih cara memasang image slideshow di blog atau website? # kepikiran code yang banyak nan rumit.

Sebenarnya sangat gampang untuk memasang image slideshow pada blog karena sudah banyak plugin jquery yang bisa dipakai dan pastinya gratis. Salah satunya Nivo Slider yang biasa penulis gunakan untuk membuat image slideshow.

LIHAT DEMO DISINI

Nivo Slider merupakan framework javascript atau jquery plugin yang dibuat khusus untuk image slide. Plugin ini memiliki 16 transisi slide yang berbeda, selain itu plugin nivo slider sangat gampang digunakan, support terhadap responsive website dan yang pasti free custom dan free cost.

Terus bagaiman cara memasang image slideshow Nivo Slider?

1. Download free nivo slider plugin di http://dev7studios.com/nivo-slider/

2. Buat  folder baru dengan nama misalnya slider

3. Ekstrak file nivoslider.zip didalam folder slider ( biasanya menjadi folder nivo-slider). Jadi dalam folder slider sudah ada folder nivo-slider (  /slider/nivo-slider/  )

4. Buat file index.php di dalam folder slider /slider/index.php  ), Mungkin penjelasanya sedikit mendetail untuk mengantisipasi kesalahan path untuk nivo slider

5. Pada index.php buatlah tag  <head>  seperti code dibawah ini :

6. Masukan javascript utama untuk slider di dalam tag <head> , posisikan script di bagian bawah. (sebelum tag penutup </head> )

7. Buatlah sebuah folder untuk menyimpan image yang akan dijadikan slide misalnya folder img (  /slider/img/  ). Masukan gambar – gambar yang akan digunakan untuk image slideshow misalnya

8. Selanjutnya pasang markup html untuk slide pada tag  <body>  seperti dibawah:

9. Nah, sekarang coba buka index.php pada browser. Image slideshow ternyata sudah jalan.

Mungkin untuk lebih advance bisa dipelajari lebih lanjut dari dokumentasi nivo slider http://docs.dev7studios.com/jquery-plugins/nivo-slider. Ada banyak sekali feature tambahan yang bisa ditambah dalam nivo slider dan dengan cara simple tinggal menambahkan beberapa property di script utama di tag <head>. Salah satu contoh merubah effect transisi seperti dibawah ini :

Dengan script di atas transisi akan berubah menjadi memudar.

Nah sekian merupakan langkah dasar dalam memasang image slideshow nivo slider. Jika masih ada pertanyaan jangan ragu untuk bertanya dan mohon maaf bila ada kesalahan dalam artikel ini.

Terima Kasih.

Share di:   Email this to someone Share on Facebook Tweet about this on Twitter Share on Google+ Share on LinkedIn

20 Komentar Pada “Cara Memasang Image Slideshow Nivo Slider

  • July 4, 2014 at 2:52 am

    wow keren

    Reply
  • July 8, 2014 at 7:33 am

    Bagus banget.. ijin

    Reply
  • July 11, 2014 at 10:13 am

    mas script yang gk bisa diganti ya? mksudnya biar gk harus ngakses alamat ajax.googleapis.com.
    file jquery.min.js bisa didownload aja gk? klo ada kasih tau linknya ya..

    Reply
  • July 11, 2014 at 10:15 am

    mksudnya scrip yg script [src=”//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js” type=”text/javascript”>]

    Reply
    • July 12, 2014 at 8:03 am

      Hi Weda,
      untuk jawaban pertanyaanya yang “mas script yang gk bisa diganti ya?”, pastinya ini bisa. Caranya:
      1. Buka url //ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js di browser.
      2. Copy semua kode yang terlihat pada browser (ctrl+a) lalu (ctrl + c).
      3. Buat file javascript kemudian paste kode yang di copy tadi. Simpan dengan nama jQuery.min.js di folder “slider” (/slider/jQuery.min.js).
      4. Langkah terakhir ganti deh [src=”//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js” type=”text/javascript”>] dengan [src=”jQuery.min.js” type=”text/javascript”>]

      Note: perhatikan case sensitif.

      Semoga membantu 🙂

      Reply
  • August 23, 2014 at 9:36 am

    image slideshow-nya cantik, saya jadi pengen pasang di blog saya.
    oiya, di demo kan tidak terlalu besar tampilannya, kalau ingin memperbesar image slideshow kira2 bagaimana ?
    terima kasih

    Reply
    • August 26, 2014 at 4:09 am

      Terima kasih Toni sudah mampir,
      Setahu saya sih ukuran slidernya itu tergantung dari ukuran gambar-gambarnya, jadi artinya slidernya bisa menyesuaikan tergantung dari gambarnya. Begitu kira-kira…

      Reply
      • March 9, 2016 at 8:01 am

        Bukannya untuk slideshow itu bisa diatur height dan widht nya ya?

        Reply
  • October 28, 2014 at 6:55 am

    om kalo mau tambahin tittle biar ada tulisan yang geser” kesampingnya kalo bisa ada shortcutnya untuk ke link lain 😀

    Reply
    • October 28, 2014 at 3:00 pm

      Hallo Sandy,

      Mungkin bisa diperjelas maksudnya kayak gimana?

      Reply
      • October 29, 2014 at 12:06 am

        gini mas.. itu slider yg ada di web inixindo saya mau buat slider web yang seperti begitu
        oh iya mas tolong bantu soalnya saya gak bisa untuk masukin slidernya ke template kalo bisa tolong ajarin caranya biar masuk ke web. pake PHP

        Reply
  • October 29, 2014 at 7:17 am

    gini mas.. itu slider yg ada di web inixindo saya mau buat slider web yang seperti begitu
    oh iya mas tolong bantu soalnya saya gak bisa untuk masukin slidernya ke template kalo bisa tolong ajarin caranya biar masuk ke web. pake PHP

    Reply
  • December 2, 2014 at 7:28 am

    klo nama gambarnya diambil dari database mysql gmana gan pake php

    Reply
    • December 3, 2014 at 7:00 am

      Haloo Ard,
      Kalo nama gambarnya dari database tinggal query aja nama-nama gambarnya. Nanti di looping pada saat nampilin gambarnya.

      < img src="img/1.jpg" alt="Image 1" / >

      jadi seperti:

      < ?php while($foo = mysql_fetch_assoc($res)){ ?>
      < img src="img/< ?php echo $foo['nama_gambar']; ? >” alt=”Image 1″ / >
      < ?php } ?>

      Semoga bisa membantu.. 🙂

      Reply
  • April 10, 2015 at 12:33 pm

    mksh infonya…,sgt bermanfaat sekali..

    Reply
  • June 15, 2015 at 3:27 am

    maaf mas saya mau tanya.. saya kan pake macromedia dreamweaver 8. mau tampilin slider di php..tp ko ga tampil ya untuk gambar’a.

    Reply
    • June 18, 2015 at 2:16 am

      Hallo Sanusi,

      untuk menampilkan gambar secara basic yaitu dengan tag <img src="{{path_image}}" />,
      coba dipastikan dulu path untuk gambarnya sudah diarahkan dengan benar.

      Semoga membantu 🙂

      Reply
  • July 23, 2015 at 1:48 am

    klo mau nambahin image lg gimana brow

    Reply
  • May 22, 2016 at 2:41 am

    Sob gmn klo fotonya di ambil dari database
    Mohon pencerahannya

    Reply

Tinggalkan Komentar: