jQuery Monte Carousel

Salah satu plugin jQuery model corousel yang patut Anda coba, Jquery Monte demikianlah nama plugin tersebut. Yang membedakan plugin jQuery Monte dengan plugin-plugin carousel lainnya adalah teletak pada tampilannya dan animasi scrolling gambarnya. Ketika Anda menekan tombol navigasinya. Ada 3 macam style dari jQuery Monte ketika Anda mendownload di situsnya http://www.jacklmoore.com/monte yang pertama adalah corousel dengan tombol navigasinya dibagian tengah, kemudian adalah dengan tombol navigasi sederhana berupa teks, dan yang terakhir adalah dengan tombol navigasi di sisi kanan dan kirinya yang disertai dengan teks deskripsi gambar.



Carousel Monte dengan tombol navigasi di bagian bawah

Membuat Corousel Monte
Pertama adalah siapkan halaman HTML kemudian panggilan file jQuery Library dan  file javascript dari Plugin Monte seperti berikut

<script src="jquery-1.8.1.min.js"></script>
<script src="jquery.monte.js"></script>


Letakan dalam tag <Head> , jangan lupa juga menambahkan CSS bawaan plugin Monte ini agar tampilannya menjadi rapi. Dan kemudian adalah menginisialkan fungsi #contoh 

<script>
$(function () {
$.monte('#contoh');
});
</script>


Untuk Script Body HTML-nya adalah seperti berikut

<div id='contoh' class='container'>
<img src='gambar1.jpg' alt='deskripsi1'/>
<img src='gambar2.jpg' alt='deskripsi2'/>
<img src='gambar3.jpg' alt='deskripsi3'/>
<img src='gambar4.jpg' alt='deskripsi4'/>
<img src='gambar5.jpg' alt='deskripsi5'/>
</div>


Gantilah dengan gambar yang Anda inginkan juga banyaknya gambar yang akan Anda buat dalam bentuk carousel.


Membuat Corousel Monte dengan tombol Navigasi di sisi carousel
Untuk membuat dengan tombol navigasi di bagian sisinya Anda harus cukup mengubah script CSS serta fungsi javascriptnya seperti beriku berikut

<style>
.container { width:850px; height:360px; }
.container > img, .container > div { width:480px; height:360px; display:none; }

#contoh img { width:100%; height:100%; }
#contoh div div { position:absolute; bottom:0; left:0; background:#fff; width:100%; }
#contoh p { margin:0; color:#000; padding:5px 15px 24px 15px; }
#contoh .frame { position:absolute; top:0; left:0; }
#contoh .montePlay { display:none; }
#contoh .montePrev, #contoh .monteNext {
       display:block;
       background-image:url(arrows.png);
       background-repeat:none;
       position:absolute;
       top:166px;
       width:24px;
       height:28px;
       text-indent:-9999px;
       }

#contoh .montePrev { left:0; background-position:bottom left; }
#contoh .monteNext { right:0; background-position:bottom right; }
#contoh .montePrev:hover { background-position:top left; }
#contoh .monteNext:hover { background-position:top right; }
</style>


Kemudian adalah script untuk fungsi javascriptnya adalah seperti berikut

<script>
$(function () {
$('#contoh > img').each(function(){
$(this)
.wrap('<div style="position:relative"/>')
.parent()
.append('<div><p>' + $(this).attr('alt') + '</p></div>')
.append('<img src="frame.png" alt="" class="frame"/>');
});
// menyembunyikan semua teks kecuali pada slide utama:
$('#contoh div div').css({opacity: 0}).eq(0).css({opacity: 0.8});
// menggunakan callbacks untuk menampilkan dan menyembunyikan teks
$.monte('#contoh', {
auto:false,
callbackIn: function () {
                        $(this[0]).find('div').animate({opacity: 0.8}, 450);
},
callbackAway: function () {
                        $(this[0]).find('div').animate({opacity: 0}, 450);
}
});
});
</script>



Anda dapat melihat demo plugin jquery keren tersebut di webnya langsung >> di Mari !!

~hdra~

Share this

Related Posts

Previous
Next Post »

Komentar disini ..