Konfigurasi jQuery Nivo Slider

Tabel Konten
  1. Kerangka Dasar 
    1. HTML 
    2. CSS 
  2. Konfigurasi jQuery Nivo Slider 
  3. Lebih Detail 
    1. Menentukan Efek Spesifik 
    2. Memodifikasi Jumlah Slice 
    3. Mengubah Kecepatan Animasi 
    4. Menampilkan Slide ke 4 Terlebih Dahulu 
    5. Menghilangkan Semua Navigasi 
    6. Mengubah Teks Navigasi `Next & Prev` 
  4. Nivo Slider dengan Thumbnail 
  5. Callback 
  6. Terakhir… 
Nivo Slider

Nivo adalah jQuery slider yang paling fleksibel dalam hal konfigurasi (setidaknya saat pertama kali Saya menulis pos ini). Terdapat begitu banyak pilihan yang dapat Anda gunakan di dalamnya. Dimulai dari menentukan efek spesifik, kontrol navigasi sampai kepada fungsi-fungsi tambahan. Namun pada intinya, Nivo adalah slider yang bisa bekerja pada sebagian besar versi jQuery:

Lihat Demo Unduh Semua Contoh

Kerangka Dasar 

Nivo Slider terbentuk dari beberapa elemen <img> yang diliputi oleh elemen <div class="nivoSlider"></div>. Ini adalah markup HTML minimalnya:

HTML 

<!DOCTYPE html>
<html dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>NivoSlider Demo - Basic</title>
    <link href="css/demo.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
  </head>
  <body>

    <div class="nivoSlider" id="nivoSlider">
      <img src="img/1.jpg" alt="" title="Slider Caption 1">
      <img src="img/2.jpg" alt="" title="Slider Caption 2">
      <img src="img/3.jpg" alt="" title="Slider Caption 3">
      <img src="img/4.jpg" alt="" title="Slider Caption 4">
    </div>

    <script src="js/jquery-1.7.2.min.js"></script>
    <script src="js/jquery.nivo.slider.min.js"></script>
    <script>
      $(window).load(function() {
        $('#nivoSlider').nivoSlider();
      });
    </script>

  </body>
</html>

CSS 

/*
 * jQuery Nivo Slider v2.7.1
 * http://nivo.dev7studios.com
 *
 * Copyright 2011, Gilbert Pellegrom
 * Free to use and abuse under the MIT license.
 * http://www.opensource.org/licenses/mit-license.php
 *
 * March 2010
 * Style by Taufik Nurrohman <http://gplus.to/tovic>
 */

#slider-wrapper {
  width:618px;
  margin:30px auto;
  padding:2px;
  background-color:black;
  -webkit-box-shadow:0 1px 5px rgba(0,0,0,.4);
  -moz-box-shadow:0 1px 5px rgba(0,0,0,.4);
  box-shadow:0 1px 5px rgba(0,0,0,.4);
}

.nivoSlider {
  position:relative;
  background:white url('loading.gif') no-repeat 50% 50%;
  width:618px; /* Make sure your images are the same size */
  height:246px; /* Make sure your images are the same size */
}

.nivoSlider img {
  position:absolute;
  top:0;
  left:0;
  display:none;
}

.nivoSlider a {
  border:none;
  display:block;
}

.nivoSlider a.nivo-imageLink {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  border:none;
  padding:0;
  margin:0;
  z-index:6;
  display:none;
}

/* The slices and boxes in the slider */
.nivo-slice {
  display:block;
  position:absolute;
  z-index:5;
  height:100%;
}

.nivo-box {
  display:block;
  position:absolute;
  z-index:5;
}

.nivo-caption {
  font:normal bold 12px/normal Arial,Sans-Serif;
  position:absolute;
  left:0;
  bottom:0;
  background-color:black;
  color:white;
  opacity:.8; /* Overridden by `captionOpacity` setting */
  width:100%;
  z-index:8;
}

.nivo-caption a {
  color:white;
  border-bottom:1px dotted white;
}

.nivo-caption a:hover {color:#ffa}

.nivo-caption p {
  padding:8px 10px;
  margin:0;
}

.nivo-html-caption {display:none}
.nivoSlider .nivo-caption a {display:inline}

/* Direction nav styles (e.g. "Next" & "Prev") */
.nivo-directionNav a {
  border:none;
  display:block;
  width:30px;
  height:30px;
  position:absolute;
  top:50%;
  margin-top:-15px;
  z-index:9;
  background:transparent url('arrows.png') no-repeat 0 0;
  text-indent:-9999px;
  cursor:pointer;
}

a.nivo-nextNav {
  background-position:-30px 0;
  right:15px;
}

a.nivo-prevNav {left:15px}

/* Control nav styles (e.g. 1, 2, 3 ...) */
.nivo-controlNav {
  position:absolute;
  top:10px;
  right:15px;
}

.nivo-controlNav a {
  font:normal normal 10px/normal Verdana,Tahoma,Arial,Sans-Serif;
  color:white;
  text-decoration:none;
  position:relative;
  z-index:9;
  cursor:pointer;
  background-color:#111;
  width:17px;
  padding:2px 0 3px;
  margin:0 0 0 4px;
  text-align:center;
  display:inline-block;
  *display:inline;
  -webkit-border-radius:2px;
  -moz-border-radius:2px;
  border-radius:2px;
}

.nivo-controlNav a.active {background-color:#39f}
Nivo Slider
Detail Nivo Slider

Untuk menjalankan slider, terapkan method .nivoSlider() secara langsung pada elemen pembungkusnya. Konfigurasi ini akan mengubah daftar gambar menjadi slider dengan opsi bawaan dari skrip Nivo yang telah terpasang:

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

Konfigurasi jQuery Nivo Slider 

OpsiKeterangan
effectDigunakan untuk menentukan efek transisi spesifik (normal: "random")
slicesDigunakan untuk menentukan jumlah potongan (jumlah potongan gambar vertikal) (normal: 15)
boxColsDigunakan untuk menentukan jumlah kolom pada efek berupa blok-blok potongan gambar (normal: 8)
boxRowsDigunakan untuk menentukan jumlah baris pada efek berupa blok-blok potongan gambar (normal: 4)
animSpeedDigunakan untuk menentukan kecepatan animasi (normal: 500)
pauseTimeDigunakan untuk menentukan seberapa lama slide akan berhenti sebelum memulai berganti menuju slide berikutnya (normal: 3000)
startSlideDigunakan untuk menentukan urutan slide yang akan terlihat lebih dulu saat slideshow dimulai. Indeks dimulai dari 0 (normal: 0)
directionNavJika bernilai false, navigasi Next & Prev tidak akan ditampilkan (default: true)
directionNavHideJika bernilai false, navigasi Next & Prev akan selalu terlihat. Jika bernilai true, navigasi Next & Prev akan menghilang, namun akan tampil ketika pointer berada di atas slider (normal: true)
controlNavJika bernilai false, navigasi 1, 2, 3, … tidak akan ditampilkan (normal: true)
controlNavThumbsJika bernilai true, navigasi 1, 2, 3, … akan berubah menjadi thumbnail, namun opsi ini membutuhkan sedikit modifikasi khusus pada CSS yang nanti akan kita bahas di bawah (normal: false)
controlNavThumbsFromRelJika bernilai true, navigasi thumbnail akan mengambil data URL thumbnail dari atribut rel di dalam setiap gambar (normal: false)
keyboardNavJika bernilai false, fitur navigasi slideshow menggunakan papan ketik akan dinonaktifkan (normal: true)
pauseOnHoverJika bernilai false, animasi slide akan terus berjalan meskipun pointer sedang berada di atas slide (normal: true)
manualAdvanceJika bernilai true, efek perpindahan slide akan dilakukan secara manual, yaitu dengan cara mengeklik navigasi Next & Prev atau 1, 2, 3, … atau menggunakan tombol panah pada papan ketik (normal: false)
captionOpacityDigunakan untuk menentukan tingkat transparasi deskripsi slide (image caption). Sebenarnya ini tidak terlalu penting dan hanya digunakan untuk menangani validasi dan masalah cross-browser untuk efek CSS transparasi (normal: 0.8)
prevTextDigunakan untuk menentukan teks navigasi Previous (normal: "Prev")
nextTextDigunakan untuk menentukan teks navigasi Next (normal: "Next")

Lebih Detail 

Di sini Saya hanya akan memberikan sedikit halaman demo. Untuk demo selengkapnya sudah ada di dalam berkas unduhan.

Menentukan Efek Spesifik 

Nivo memiliki beberapa efek di dalamnya yang secara normal akan ditampilkan secara acak. Efek-efek tersebut diantaranya bisa Anda lihat di dalam kode sumber jquery.nivo.slider.js pada bagian ini:

if(settings.effect == 'random') {var anims = new Array('sliceDownRight','sliceDownLeft','sliceUpRight','sliceUpLeft','sliceUpDown','sliceUpDownLeft','fold','fade','boxRandom','boxRain','boxRainReverse','boxRainGrow','boxRainGrowReverse');    currentEffect = anims[Math.floor(Math.random() * (anims.length + 1))];
    if (currentEffect == undefined) currentEffect = 'fade';
}

Sebagai contoh, jika Anda menginginkan efek sliceUpRight dan sliceDownRight saja, caranya cukup dengan menuliskannya seperti ini:

$('#nivoSlider').nivoSlider({
    effect: 'sliceUpRight,sliceDownRight'
});

Lihat Demo

Memodifikasi Jumlah Slice 

Secara normal, jumlah slice adalah 15 dan box sebanyak 8 × 4. Namun kita bisa memodifikasi jumlahnya. Yang penting pastikan saja Anda menggunakan angka-angka yang tepat sesuai dengan pembagian lebar dan tinggi gambar agar hasilnya tidak berantakan. Misalnya, jika ukuran gambar yang digunakan untuk membuat slider adalah 200 × 100, buatlah jumlah slice sebanyak 10 atau 20 dan jangan membuat jumlah slice sebanyak 13, 17, 70, … karena ini akan membuat slider menjadi tersentak-sentak. Selain itu jangan terlalu banyak menciptakan slice, itu akan membuat peramban menjadi macet (biasanya muncul peringatan: the script on this page is too busy blah blah blah…):

$('#nivoSlider').nivoSlider({
    slices: 20, // Menentukan jumlah slice sebanyak 20
    boxCols: 5, // Menentukan jumlah kolom sebanyak 5
    boxRows: 4  // Menentukan jumlah baris sebanyak 4
});

Lihat Demo

Mengubah Kecepatan Animasi 

Kecepatan animasi bisa diubah dengan mudah:

$('#nivoSlider').nivoSlider({
    animSpeed: 1000, // Menentukan kecepatan animasi
    pauseTime: 2000  // Menentukan lama waktu tunda sebeum animasi berpindah ke slide berikutnya terjadi
});

Menampilkan Slide ke 4 Terlebih Dahulu 

Dalam JavaScript, urutan umumnya dimulai dari 0, jadi pastikan Anda tidak keliru dengan ini. Jika ingin menampilkan slide ke empat sebagai slide pertama yang ditampilkan, maka Anda harus menuliskan nilai 3 pada opsi startSlide:

$('#nivoSlider').nivoSlider({
    startSlide: 3 // Urutan ke empat
});

Lihat Demo

Menghilangkan Semua Navigasi 

Menghilangkan semua navigasi dapat dilakukan dengan cara menuliskan nilai false pada semua opsi yang berhubungan dengan navigasi jalan pintas. Jika perlu, nonaktifkan juga fitur navigasi dengan papan ketik sehingga pengunjung tidak akan bisa melakukan apapun kecuali menatap slider sampai pertunjukan berakhir. Ini jika Anda ingin menguji kesabaran pengunjung:

$('#nivoSlider').nivoSlider({
    directionNav: false,
    controlNav: false,
    keyboardNav: false
});

Lihat Demo

Mengubah Teks Navigasi `Next & Prev` 

Secara normal, navigasi Next & Prev tidak akan menampilkan teks apapun. Karena di dalam temanya indentasi teks memang sudah diset agar tidak terlihat untuk mengubah tampilannya menjadi berupa gambar panah kiri dan kanan:

.nivo-directionNav a {
  border:none;
  display:block;
  width:30px;
  height:30px;
  position:absolute;
  top:50%;
  margin-top:-15px;
  z-index:9;
  background:transparent url('arrows.png') no-repeat 0 0;text-indent:-9999px;  cursor:pointer;
}

Hal yang sama juga terjadi pada navigasi 1, 2, 3, …

.nivo-controlNav a {
  display:block;
  width:22px;
  height:22px;
  background:transparent url('bullets.png') no-repeat 0 0;text-indent:-9999px;  border:none;
  margin-right:3px;
  float:left;
}

Jika Anda menginginkan navigasi Next & Prev dengan keterangan berupa teks, Anda perlu memodifikasi CSS di dalam temanya:

.nivo-directionNav a {
  width:auto;
  height:auto;text-indent:0;  background-image:none;
  background-color:black;
  font:normal bold 10px/normal Verdana,Arial,Sans-Serif;
  color:white;
  padding:5px 8px 6px;
}

.nivo-directionNav a:hover {background-color:#39f}
$('#nivoSlider').nivoSlider({
    prevText: 'Sebelumnya',
    nextText: 'Berikutnya'
});
Nivo Slider Navigasi Next & Prev
Navigasi Next & Prev

Lihat Demo

Nivo Slider dengan Thumbnail 

Nivo Slider memiliki beberapa hal yang akan membuat semua pengaturan menjadi jauh lebih praktis dan masuk akal. Pertama, teks di dalam caption (pita hitam berisi deskripsi slide) diproduksi dari atribut title pada gambar. Begitu pula dengan thumbnail. Untuk mengaktifkan thumbnail pada NioSlider, syarat pertama yang harus Anda penuhi adalah membuat beberapa gambar berukuran kecil sebagai thumbnail, kemudian memasukkan URL gambar tersebut ke dalam atribut rel yang telah ditambahkan ke dalam setiap gambar:

<div class="nivoSlider" id="nivoSlider">
    <img src="img/1.jpg" alt="" title="Slider Caption 1" rel="img/1_thumb.jpg">
    <img src="img/2.jpg" alt="" title="Slider Caption 2" rel="img/2_thumb.jpg">
    <img src="img/3.jpg" alt="" title="Slider Caption 3" rel="img/3_thumb.jpg">
    <img src="img/4.jpg" alt="" title="Slider Caption 4" rel="img/4_thumb.jpg">
</div>

Setelah atribut rel ditambah, maka thumbnail akan secara otomatis terbentuk di dalam kontrol navigasi. Namun saat ini thumbnail masih tidak bisa terlihat karena pengaturan normal dalam CSS dan dalam plugin masih belum mengizinkan untuk menampilkan gambar. Anda harus memodifikasi kode CSS di dalamnya untuk mengaktifkan thumbnail dan mengaktifkan fitur navigasi thumbnail pada pengaturan (baca: Using Thumbnail with the Nivo Slider)

.nivo-controlNav {
  top:100%;
  right:0;
  left:0;
  text-align:center;
  margin-top:15px;
}

.nivo-controlNav a {width:auto;  height:auto;  padding:0;
  background:none;
}
.nivo-controlNav img {display:block;  position:relative;
  border:2px solid #111;
  opacity:.8;
}
.nivo-controlNav a.active img {opacity:1}
$('#nivoSlider').nivoSlider({
    controlNavThumbs: true,
    controlNavThumbsFromRel: true,
    controlNavThumbsSearch: '.jpg',
    controlNavThumbsReplace: '_thumb.jpg'
});

Lihat Demo

Callback 

Sedikit tambahan. Pada bagian bawah Anda akan melihat beberapa fungsi kosong seperti berikut:

$('#nivoSlider').nivoSlider({
    ...
    ...
    beforeChange: function() {},
    afterChange: function() {},
    slideshowEnd: function() {},
    lastSlide: function() {},
    afterLoad: function() {}
});

Itu semua adalah fungsi-fungsi kosong yang nantinya bisa Anda gunakan untuk membuatnya bekerja pada waktu-waktu tertentu:

OpsiKeterangan
beforeChangeDigunakan untuk menjalankan aksi sebelum slide berganti.
afterChangeDigunakan untuk menjalankan aksi setelah slide berganti.
slideshowEndDigunakan untuk menjalankan aksi setelah slideshow berakhir.
lastSlideDigunakan untuk menjalankan aksi saat animasi telah mencapai slide terakhir.
afterLoadDigunakan untuk menjalankan aksi saat slider telah selesai (baru saja selesai) dimuat.

Katakanlah kita akan menciptakan fungsi-fungsi tambahan yang akan dijalankan secara otomatis berdasarkan pembagian waktu seperti pada tabel di atas. Ini cuma contoh saja. Dalam kenyataannya, fungsi bisa bermacam-macam. Di sini Saya akan menggunakan jQuery .text() dan .append() sebagai percobaan:

$('#slider').nivoSlider({
    manualAdvance: true,
    beforeChange: function() {
        $('#callback-message').append('Next slide...<br>');
    },
    afterChange: function() {
        $('#callback-message').append('Slide changed.<br>');
    },
    slideshowEnd: function() {
        $('#callback-message').append('The end!<br>');
    },
    lastSlide: function(){
        $('#callback-message').append('This is the last slide!<br>');
    },
    afterLoad: function(){
        $('#callback-message').append('Starting slideshow...<br>');
    }
});

Kemudian kita buat elemen #callback-message sebagai penampil pesan:

<p id="callback-message">Teks akan masuk di sini...</p>

Sampai di sini Saya rasa cukup mudah dipahami:

Lihat Demo

Terakhir… 

Jangan terpaku pada tema yang itu-itu saja. Cobalah untuk mengubah posisi navigasi, deskripsi slide, warna latar dan yang lain untuk menciptakan tema sendiri. Semoga sukses!

Lihat Demo

74 Komentar

  • Randy

    bang sya ingin tanya,gimana kalo slider ini disatukan js nya dengan js readmore otomatis utk recent post kita,jadi dihome dia munculnya gini bang :D kalo bisa PM saya ya thanks alot

  • Taufik Nurrohman

    @randy yang penting share WANI PIROOO... Khkhkhh... (-.-,)

    • Bang Randy

      jiahhh abang ni , hemm sibu ya mau? wwkw oh ya bang kalo nivo slidernya disatuin ama js yang slider otomatis post recent gimana??

      • Taufik Nurrohman

        Karena Nivo Slider memakai item slideshow berupa background, jadi susah mengeset ukuran setiap slide.

  • Putra

    masih bingung masangnya mas :D

  • Angga

    mas taufik..saya bingung gimana caranya agar nivo slidernya cuman tampil di home dan searchlabel..jadi tidak tampil pada waktu full post..mhon pencerahanya y mas..^^

  • Rotasi Globe

    baru kali ini nih sampe detail gini tutornya.....

    lanjutkan mas..
    semoga amal ibadahnya dibalas oleh tuhan :-bd 0:)

  • Taufik Nurrohman

    @Angga Y Letakkan slideshow di antara kondisi pengingkaran halaman item dan halaman statis:

    <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
    <b:if cond='data:blog.pageType != &quot;item&quot;'>
    Letakkan slideshow di sini...
    </b:if>
    </b:if>

    [note]Terkait: Tag Kondisional Tingkat Lanjut[/note]

    • Angga

      maksih banyak jawabanya mas topik, itu koment sy beberapa tahun yg lalu..: D ..Btw, keren bgt itu yg CSS Kereta lokomotif..karya seorang master emang beda.. :)

  • Muhammad Zaki Al Aziz

    Om cara pemakaiannya bagaimana om? :(
    Tolong dong sekali ini saja.

  • Andy Nur

    Mantep deh :D , Sliedshow ini yg pertma kali saya jadiin eksperimen coba2 aja terxta dsni lbih detail lgi, mntep deh \o/ ..

  • Unknown

    saya ganti aja slid shownya pake ini tapi gimana supaya slidshownya di taro di tengah blog dan di bagian home kaya slid show yang ada di template template premium gitu mohon sangat pencerahanya dari mas kang taufik

  • Unknown

    1 pertanyaan lagi sangat penting jadi plis dijawab y kalo mau pasang thumbal di sebelah kanan gimana kan contoh di atas di bawah nah sekarang mau pasang disamping + ada deskiptionnya mohon dijawab ya sangat sangat penting bagiku

  • Unknown

    adalagai mungkin ini yang terakhir pertanyaan bagaimana caranya slid show hanya tampil bagia home saja

  • Taufik Nurrohman

    @Thomi Jasir Cek kode CSS halaman demo terakhir.

  • Taufik Nurrohman

    @Thomi Jasir Taruh kerangka slideshow di dalam tag kondisional halaman muka:

    <b:if cond='data:blog.homepageUrl == data:blog.url'>
    <div class='nivoSlider'>
    <a href='#'><img src='images/1.jpg' alt='' title='Aku tidak akan pernah tahu' /></a>
    <a href='#'><img src='images/2.jpg' alt='' title='Bahwa ini dan mereka itu tidak akan pernah identik' /></a>
    <a href='#'><img src='images/3.jpg' alt='' title='Sebuah kenyataan yang lucu' /></a>
    <a href='#'><img src='images/4.jpg' alt='' title='Meski seringkali begitu menyakitkan' /></a>
    </div>
    </b:if>
  • Unknown

    anu kang taufik kok gak keluar ya gambarnya padalah sudah saya teliti

    kang taufik sudah saya pasang dibawah itu tapi keluarnya kok di bawah judul di setiap postingan lagi keluar slid shownya

  • Unknown

    oh saya baru tahu kenapa thumbal gak mun cul saat di slid show karena ada yag kurang di /head di atas nya sehingga tidak memanggil thumbail trus biar caranya memecahkan masalah ini bagai mana ?

  • Taufik Nurrohman

    @Thomi Jasir Tambahkan atribut rel pada setiap slide. Isi dengan URL gambar thumbnail. Set opsi controlNavThumbs dan controlNavThumbsFromRel menjadi true. Di atas sudah dijelaskan.

  • Unknown

    cara pasang kode di atas bagaimana saya sebelumnya gak pake kode itu melainkan kode js yang udah jadi yang saya pakai untuk menampilkan slid show.......

    sebelumnya saya minta maaf banyak nanya namun itulah saya gak akan berhenti sampai bisa jadi mohon bantu ya.....

  • Taufik Nurrohman

    @Thomi Jasir Cara pasangnya ya begitu. Persis seperti itu.
    Kalau bingung dengan versi asli konfigurasi slideshow ini, ada satu contoh yang mudah. Saya ambil contoh dari blog Abu Farhan: http://www.abu-farhan.com/2011/07/automatic-content-slider-for-blogger-using-nivo-slider-part-1/

  • Bakteri

    bg taufic saya mau tanya kalau gambarnya width nya gax 316px dan 246px gimana sih biar auto jadi 316px dan 246px ?

  • Taufik Nurrohman

    @edinofri Nggak bisa. Walaupun slideshow ini memakai gambar, tapi sebenarnya Nivo cuma mengambil nilai atribut src pada gambar tersebut untuk digunakan sebagai nilai background pada mosaik-mosaik slide yang dibangun secara otomatis, sedangkan gambar yang sebenarnya akan disembunyikan:

    slider.append(
    $('<div class="nivo-slice"></div>').css({
    left:(sliceWidth*i)+'px', width:sliceWidth+'px',
    height:'0px',
    opacity:'0',
    background: 'url("'+ vars.currentImage.attr('src') +'") no-repeat -'+ ((sliceWidth + (i * sliceWidth)) - sliceWidth) +'px 0%'
    })
    );

    Ada cara lain sebenarnya, menggunakan background-size, tapi Saya kurang yakin :\

  • didiksulis

    mas saya mau tanya
    kalau mau dipasang di web dan data gambar yang diambil dari database bagaimana ya??saya masih bingung.trima kasih

    • Taufik Nurrohman

      Kurang tahu. Biasanya elemen-elemennya harus dituliskan secara tidak langsung dengan bahasa tertentu. Satu contoh Saya dapat dari plugin WordPress seperti ini:

      ...
      echo '<img src="'.$image->imageURL.'" '. $image_description . $size .' />';
      ...
      • didiksulis

        masalah sudah teratasi mas.sekarang yang jadi masalah,web saya memakai template yang ada dropdown menunya.setelah saya memasang nivo slider, ketika gambar berganti maka dropdown menunya jadi tertutup oleh gambarnya.apa yang harus saya rubah ya mss?terima kasih

  • debbie irlando manurung

    mas saya udah coba tapi tidak pernah berhasil, saya bingung dengan kata kata mas, letkkannya dimana bingung. huft

  • Unknown

    mas mohon bantuannya untuk melebarkan slide menjadi 1024 , sudah di ganti , sesuai ukuran gambar, tapi slidenya tetep ukuran yang sma

    '.nivoSlider {
    position:relative;
    background:#fff url(loading.gif) no-repeat 50% 50%;
    width:1024px; /* Samakan dengan lebar gambar */
    height:250px; /* Samakan dengan tinggi gambar */

    apakah di situ mas caranya ?

    • Taufik Nurrohman

      Kalau begitu ukuran gambarnya juga harus selebar 1024 piksel. Slideshow ini sebenarnya tidak menggunakan gambar, tapi menggunakan background yang diambil dari gambar setiap slide.

  • KMKO Sipil Unhas

    Mas, saya kan udah berhasil buat kalo di goole posting..
    http://kmkosipil.googlecode.com/svn/trunk/Nivo%20Slider/2.html

    tapi kenapa pas saya saya masukin code 2.html di widget, kok nga berhasil??
    salahnya dimana mas??
    mohon bantuannya..
    terima kasih.

    • Taufik Nurrohman

      Masukkan ke iframe:

      <iframe style="width:100%;height:300px;" src="http://kmkosipil.googlecode.com/svn/trunk/Nivo%20Slider/2.html"></iframe>
  • Muhammad Zulfi Rahmanzi

    wah, patut dicoba nih keren tampilannya

  • Unknown

    mas kalo saya pengen dibikin slidenya ga berjalan otomatis ditambah perintah apa mas?

    • Taufik Nurrohman

      $(window).load(function() {
      $('.nivoSlider').nivoSlider({manualAdvance:true});
      });
  • 8D Productions

    Di halaman home blog saya sudah ada nivoslider, tapi saya ingin menambahkan beberapa nivoslider lainnya di halaman statis blog saya dengan ukuran yang berbeda, apakah bisa? bagaimana caranya? Terima kasih sebelumnya. :-bd

  • Unknown

    @Taufik Nurrohman Kajiannya sgt bagus mas...

    Kode2 nivo udah sya sisipkan di web saya sesuai ukuran gambar tapi yg keluar cuma space kosong aja sdangkan gambar slidernya ga muncul.
    Kira-kira apa masalahnya ya? n solusinya gmn?

    Trims

    • Taufik Nurrohman

      Mungkin kode JQuery belum dipasang. Kode yang seperti ini, harus sudah ada sebelum slideshow dipasang:

      <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script>
  • Unknown

    Mas taufik, saya sudah mencoba berbagai slide nivo, tapi kok tidak jalan ya?
    Yang muncul hanya background putih dengan loading memutar saja tidak berhenti. Padahal ajax.jquery sudah saya tambahkan di atas / head. Terima kasih mas.

    • Taufik Nurrohman

      Susunannya kalau bisa seperti ini:

      <head>
      ...
      ...
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
      </head>
      <body>
      <div class="nivoSlider">
      ...
      ...
      </div>
      <script src="js/jquery.nivo.slider.min.js" type="text/javascript"></script>
      <script type="text/javascript">
      $('.nivoSlider').nivoSlider();
      </script>
      </body>

      Tidak perlu memakai $(window).load(fn)

      • Unknown

        Mas, sudah lumayan dapet. Tapi ga mau jalan otomatis mas :

        Ini saya ambil dari sekaratmutlakmu mas:

        kan saya pasang pengen kayak homepage sampeyan mas:

        <b:if cond='data:blog.url == data:blog.homepageUrl'>
        <b:section class='main' id='homepage'>
        <b:widget id='HTML1' locked='false' title='' type='HTML'>
        <b:includable id='main'>
        <!-- only display title if it's non-empty -->
        <b:if cond='data:title != &quot;&quot;'>
        <h2 class='title'><data:title/></h2>
        </b:if>
        <div class='widget-content'>
        <script type="text/javascript" src="http://reader-download.googlecode.com/files/jquery.nivo.slider.js"></script>
        <style type="text/css">
        ---
        ---
        </style><div id="slider-wrapper"><div class="nivoSlider" id="slider"><a href="http://latitudu.blogspot.com/"><img alt="" src="http://1.bp.blogspot.com/-if-jFfz93yA/Tz-0Zs1DvkI/AAAAAAAACJw/EF6mFH0fu8k/s1600/1.jpg" title="Aku tidak akan pernah tahu" /></a><a href="http://latitudu.blogspot.com/"><img alt="" src="http://1.bp.blogspot.com/-iGvnxF3Wy_M/Tz-0lKDQCBI/AAAAAAAACJ4/wDyhTcdE50M/s1600/2.jpg" title="Bahwa ini dan mereka itu tidak akan pernah identik" /></a><a href="http://latitudu.blogspot.com/"><img alt="" src="http://3.bp.blogspot.com/-92QipM5Wifg/Tz-0xDNdjeI/AAAAAAAACKA/K5_x5pBY8D0/s1600/3.jpg" title="Sebuah kenyataan yang lucu" /></a><a href="http://latitudu.blogspot.com/"><img alt="" src="http://3.bp.blogspot.com/-UQRJfhcgmhk/Tz-08P_5uuI/AAAAAAAACKI/SqsqDOEB6XQ/s1600/4.jpg" title="Meski seringkali begitu menyakitkan" /></a></div></div>
        </div>
        <b:include name='quickedit'/>
        </b:includable>
        </b:widget>
        </b:section>
        <i rel="pre">&lt;script type="text/javascript"&gt;
        $('#slider').nivoSlider({
        effect: 'random',
        slices: 15,
        boxCols: 8,
        boxRows: 4,
        animSpeed: 500,
        pauseTime: 3000,
        startSlide: 0,
        directionNav: true,
        directionNavHide: true,
        controlNav: true,
        controlNavThumbs: false,
        controlNavThumbsFromRel: false,
        controlNavThumbsSearch: '.jpg',
        controlNavThumbsReplace: '_thumb.jpg',
        keyboardNav: true,
        pauseOnHover: true,
        manualAdvance: true,
        captionOpacity: 0.8,
        prevText: 'Prev',
        nextText: 'Next',
        beforeChange: function(){},
        afterChange: function(){},
        slideshowEnd: function(){},
        lastSlide: function(){},
        afterLoad: function(){}
        });
        &lt;/script&gt;
        &lt;/body&gt;</i>

        yang salah apa mas? NAvigasinya pun saya klik tidak mau jalan mas. Stack di image pertama saja.

        • Taufik Nurrohman

          Ganti manualAdvance: true menjadi manualAdvance: false

          • Unknown

            Sudah mas berkali-kali tapi tetap gagal... Bagaimana ya mas?? huuuhu

            • Taufik Nurrohman

              Mungkin masalah versi. Posting ini terbit kalau tidak salah saat rilis akhir JQuery versi 1.7.2
              Kalau kamu memakai versi JQuery di atas itu, kemungkinannya tidak akan bekerja. Seperti slideshow blog Saya juga macet ketika Saya mengganti JQuery ke versi 1.9.1 (sekarang sudah bisa setelah plugin NivoSlider-nya Saya modifikasi. Tapi tetap mencoba bertahan dulu di JQuery versi lama untuk alasan tertentu).

  • Unknown

    Salam Kenal Mas Taufik.. pendatang baru. tpi nyimak terus.. =D
    saya mau tanya.. jika slide ini di untuk kontentnya berdasarkan recent post gimana yah.. ^_^

  • EM

    Assalamu'alaikum mas,
    untuk integrasi nivo slider ini dengan recent article gimana mas?
    jadi nantinya di home page akan tampil slide artikel terbaru otomatis menggunakan style nivo ini mas.
    mohon bantuannya mas.....

  • GP

    mas tovic, ini slider udah aku pasang di blogku,
    dan alhamdulillah setengah sukses,
    ada sedikit kendala mas,
    slidernya kadang tampil kadang enggak,
    saya memakai jquery 1.6.1,

    tolong di bantu mas,,,,,,

    thx

    oh ya ini alamat blog sederhana saya:

    gloripuisi.blogspot.com

  • Unknown

    tutorial yang komplit.. mantafff n manfaat bgt. terima kasih

  • Fairuz Milkiy Kuswa

    Gan, saya mau nanya nih :D
    kan slider saya cuma 1 efek transisi ya, nh sy pngen ngbah efectnya jadi random, tapi sy gk pk nivo slider spt yg agan brkan itu, saya pengen modif slider yg sdh ada, sptnya ini kode jquerynya gan

  • Fairuz Milkiy Kuswa

    ini website saya gan http://fairuzmilky.blogspot.com
    tolong liatkan kode jquerynya pake view pagesource gan :D

  • Unknown

    makasih gan bagi ilmunya .. ^_^

  • Unknown

    Mas kalo .nivo-contralnav kebawah untuk diubah jadi kesamping gmn??

  • Unknown

    source kodenya ga bisa didonlud boss, muncul peringatan aneh dr google, mati aku mn ini source kode bagus bgt,tolong bos dishare ke media penyimpan lain kayak mediafire to ga 4shared,biar enak ngedonlutta, heeheehe...makasi

  • Unknown

    Thank you for your explanation, there is anyway to view the demo samples and download the code, when I click the to download it request a username and password.

    Thanks in advance for your replay.

    Carlos

    • Taufik Nurrohman

      Yeah... that's my problem. I'll try to fix it as soon as possible (please click the Maintenance button).

  • Vivian Angel リム

    Mw numpang tanya, saya sdh pakai nivo slider tpi gmbr di slider hanya ad 4.. kalau saya ingin menambahkan jumlah gambar di slider menjadi 7 gmbr, bgmn cranya y? Terima Kasih sebelumnya..

    • Taufik Nurrohman

      Ditambah saja tag <img> di dalamnya, nanti otomatis akan bertambah sendiri:

      <div class="nivoSlider" id="nivoSlider">
      <img src="img/1.jpg" alt="" title="Slider Caption 1">
      ↓ ↓ ↓ (tambahkan 6 gambar lagi)
      ...
      </div>
  • Tubagus Habibullah

    Mas, kok pas mau ganti slide seperti ada slide hitam sekilas gitu ya? cara ngilanginnya gimana mas? tq

    • Taufik Nurrohman

      Itu biasanya masalah cache. Ngetes di lokal ya? Kalau bukan, lebih baik dioptimalkan mengenai cache gambarnya.

  • Tubagus Habibullah

    iya betul gan ngetes di lokal. gimana solusinya?

    • Taufik Nurrohman

      Tidak apa-apa, kalau sudah online nanti masalah itu akan hilang sendiri.

  • Unknown

    Bang maaf, agak telat mungkin saya updatenya, tapi daripada gak ditanyain :p
    Gini saya mau upload sendiri file .css dan .js nya ke google drive tapi waktu diaplikasiin gak bisa, padahal waktu pake script punyamu yang di demo-nya bisa. Mohon solusi 'speedy' nya ya gan HEHE

    Nice post

  • Unknown

    Mau tanya bang. Di tutor ini kan nivo-caption'nya pake efek fade, cara buat supaya nivo-caption muncul dari bawah gimana?...

    • Taufik Nurrohman

      Sudah lama Saya tidak ngecek pembaharuan plugin NivoSlider. Setahu Saya NivoSlider tidak punya opsi semacam itu.

  • Admin MDC

    Maaf mas...mau tanya...biar judul nya bisa ngelink dirubah apanya ya mas..??

    • Taufik Nurrohman

      title="&lt;a href=&quot;http://www.google.com&quot;&gt;test link&lt;/a&gt;"

      Masukkan elemen <a> ke dalam atribut title pada gambar, tapi harus di-escape dulu. Bisa pakai alat konversi kode di atas formulir komentar ini.

  • lubis

    oohh ini dr blogspot mau dimasukin nivo slider tohh.... klo WP gmana ya gan?. punya saya buffering terusss... g mau jalan

  • Unknown

    kalau link nya dari database bagaimana ya pak ?

Komentar telah ditutup.