Basic Full Screen jQuery Slideshow with Next Prev Button

http://blog.kangrian.com

HTML

<script src="http://malsup.github.com/jquery.cycle.all.js"></script>

<br><br><br><br><br>
<div id="slideshow">
<img alt='' src='https://lh4.googleusercontent.com/-hfcK0-Lq_PE/UvN4voQJnpI/AAAAAAAAD_I/Dc3IazzMDEw/w737-h553-no/cvr.jpg'/>
<img alt='' src='https://lh6.googleusercontent.com/-HLEYCtaZU1s/UkKfrhI7g0I/AAAAAAAACxY/afUP2oKFVSo/w554-h553-no/rian.jpg'/>
<img alt='' src='https://lh6.googleusercontent.com/-eQDvy6oEqyA/UnxrLuRCkRI/AAAAAAAADBM/2BKyx5fWcK4/s553-no/rian.jpg'/>
<img alt='' src='https://lh6.googleusercontent.com/-n0c6Q0ue1JM/UsFCzKHyGsI/AAAAAAAADls/LfODc42DEVU/w950-h454-no/s1.jpg'/>
</div>

<!-- Button NEXT // PREV -->
<div class='tombol'><a id="left"><img src='http://i.imgur.com/I33m8mZ.png'/></a><a id="right"><img src='http://i.imgur.com/crDnnrw.png'/></a>
</div>

CSS

.tombol { cursor:pointer;}
  #left { z-index:1; position:fixed;top:45%; left:10px; }
  #right { z-index:1; position:fixed;top:45%; right:10px; }
  .tombol a { opacity:.7; }
  .tombol a:active { opacity:.5; }
  .tombol a:hover { opacity:1; }
#slideshow { 
    position:fixed;
    width:100%;max-width:1600px;
    height:100%;
    top:0px;
    left:0px;
z-index:-1;
}
#slideshow img {
    position:fixed;
    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:      'fade', 
    next:   '#right', 
    prev:   '#left',
    delay: -1000 // semakin kecil semakin cepat
});