Cara Membuat Slide Gambar / Slideshow JQuery Simple

Salam Programmer Buat agan agan semuanya.. kali ini saya akan membagi ilmu saya yaitu tentang Cara Membuat Slide Gambar / Slideshow JQuery Simple.

Berikut adalah Codenya : 

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js'></script>
<script>
var i=0;
$(document).ready(function () {
 $('.slidertitle, #slider img').hide();
 showNextImage();
  setInterval('showNextImage()', 3000);
    });
    function showNextImage() {
  i++;
              $('#sliderImage' + i).appendTo('#slider').fadeIn(1100).delay(1100).fadeOut(1100);
     $('#title' + i).appendTo('#slider').fadeIn(1100).delay(1100).fadeOut(1100);
  if(i==3){
   i=0;
  }
    };
</script>
<style type="text/css">
#slider {
 padding:10px 0 10px;
 position:relative;
 width:630px;
 height:310px;
}
#slider img{
 width:630px;
 height:300px;
 position:absolute;
 -webkit-border-radius:5px 5px 5px 5px;
 border-radius:5px;
 -moz-border-radius:5px 5px 5px 5px;
}
.slidertitle{
 width:630px;
 margin-top:265px;
 text-align:center;
 position:absolute;
 padding:10px;
 -webkit-border-radius:0px 0px 5px 5px;
 border-radius:0px 0px 5px 5px;
 -moz-border-radius:5px 5px 5px 5px;
 color:#FFF;
 background-color:rgba(12, 22, 23, 0.50);
}
</style>
<div id="slider">
  
<img id="sliderImage1" 
src='1.jpg'>
        <div class="slidertitle" id="title1">Biyan Soft</div>
   
<img id="sliderImage2" 
src='2.jpg'>
        <div class="slidertitle" id="title2">pantaupekanbaru.com</div>
   
<img id="sliderImage3" 
src='3.jpg'>
        <div class="slidertitle" id="title3">biyansoft.com</div>
</div>

Tweet