Basic jQuery Cycle Plugin [ DEMO ]

http://blog.kangrian.com

by Rian .N Herdian

HTML

<script src="http://malsup.github.com/jquery.cycle.all.js"></script>
<button id="before">Sebelumnya</button>
<button id="after">Selanjutnya</button>
<!-- Hapus kode di atas jika tidak ingin menggunakan tombol! -->

<div id="slideshow">
<img alt='' src='http://i.imgur.com/1nNsHmi.jpg'/>
<img alt='' src='http://i.imgur.com/8HC129z.jpg'/>
<img alt='' src='http://i.imgur.com/KiUftfk.jpg'/>
</div>

CSS

#slideshow { 
    position:relative;
    width:100%;
    max-width:300px; /* Atur Lebar Gambar ! */
    height:100%;
    max-height:300px; /* Atur Tinggi Gambar ! */
}
#slideshow img {
    width:100%;
    height:100%;
    top:0px;
    left:0px;
    background:#fff url(http://www.ajaxload.info/cache/FF/FF/FF/33/33/33/6-0.gif) no-repeat center;
}

JavaScript

$('#slideshow').cycle({ 
    fx:     'fadeZoom', 
    next:   '#before', 
    prev:   '#after',
    sync: false,
    delay: -3000
});