Menampilkan Beberapa Slideshow Sekaligus Dalam Satu Halaman

Menampilkan Beberapa Slideshow Sekaligus sama seperti yang telah saya posting kemarin yaitu Recent Posts slider With Navigation

Karena eksekusi plugin ini di lakukan di luar, maka ini memungkinkan Anda untuk menampilkan beberapa slideshow sekaligus dalam satu halaman. Pertama-tama buahlah beberapa elemen HTML yang dibutuhkan untuk memuat slideshow.

<div id="container-1" class="slider-rotator loading"></div>
<div id="container-2" class="slider-rotator loading"></div>
<div id="container-3" class="slider-rotator loading"></div>

Kemudian jalan fungsi makeSlider() sebanyak jumlah kontainer yang dibuat. Tentukan juga konfigurasi containerId yang berbeda-beda berdasarkan ID kontainer:

makeSlider({
url: "http://nama_blog-1.blogspot.com",
containerId: "container-1"
});
makeSlider({
url: "http://nama_blog-2.blogspot.com",
containerId: "container-2"
});
makeSlider({
url: "http://nama_blog-3.blogspot.com",
containerId: "container-3"
});

DEMO-nya bisa Anda lihat seperti yang telah saya buat di atas.

Kode Snippet:

<link rel="stylesheet" type="text/css" href="http://blogger-json-experiment.googlecode.com/svn/resources/blogger-feed-rotator-plugin/default-style.min.css"/>
<style type="text/css">
/* Custom CSS here... */
.slider-rotator-wrapper {
  width:630px;
  padding:10px 5px;
  border:1px solid #ccc;
  background-color:white;
  margin:0 auto;
}
.slider-rotator-wrapper .grid {
  float:left;
  margin:0 5px;
}
.slider-rotator {
  padding:0 0;
  border:none;
  width:200px;
  height:320px;
}
.slider-rotator .slider-item {padding:0 0}
.slider-rotator-nav {
  overflow:hidden;
  margin-top:10px;
  border:1px solid #999;
  background-color:#ccc;
  padding:2px 0;
}
.slider-rotator-nav a {
  margin:0 0;
  display:inline-block;
  line-height:normal;
}
.clear {clear:both}
</style>

<div id="slider-rotator-wrapper" class="slider-rotator-wrapper">
    <div class="grid">
        <div id="slider-rotator-1" class="slider-rotator loading"></div>
    </div>
    <div class="grid">
        <div id="slider-rotator-2" class="slider-rotator loading"></div>
    </div>
    <div class="grid">
        <div id="slider-rotator-3" class="slider-rotator loading"></div>
    </div>
    <div class="clear"></div>
</div>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="http://blogger-json-experiment.googlecode.com/svn/resources/blogger-feed-rotator-plugin/blogger-feed-rotator.min.js"></script>
<script type="text/javascript">
makeSlider({
    url: 'http://nama_blog-1.blogspot.com',
    labelName: "JQuery",
    thumbWidth: 200,
    interval: 10000,
    containerId: "slider-rotator-1"
});
makeSlider({
    url: 'http://nama_blog-2.blogspot.com',
    labelName: "CSS",
    thumbWidth: 200,
    interval: 10000,
    containerId: "slider-rotator-2"
});
makeSlider({
    url: 'http://nama_blog-3.blogspot.com',
    labelName: "Mengenai",
    thumbWidth: 200,
    interval: 10000,
    containerId: "slider-rotator-3"
});
</script>

Selamat mencoba, semoga berhasil,..

Advertise

Contact Me

300x250

Advertise

Contact Me

300x250