Contoh

By

Berikut adalah Codenya :

<!DOCTYPE html>
<HTML>
<head>
<meta content='text/html; charset=UTF-8' http-equiv='content-type'/>
<meta charset='UTF-8'/>
<meta content='width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=0, shrink-to-fit=no' name='viewport'/>

<link crossorigin='anonymous' href='https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css' integrity='sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh' rel='stylesheet'/>
<link href='http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>
<title>/</title>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js' type='text/javascript'></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>

</head>
<body>
<div class="container-fluid">

<div id="slider">
 
<img id="sliderImage1" 
src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgx5XyKsMqqa-Hk9dV_N7a_6xuE2kmpCe8hWMX1xdK_KFTCHUOjR37KaXfP8tDqPVbihpoYN3Xjr_jZQU7cRBV5MnsTN_E7B475QhTyU6m1J1RYfmBptXljekfjDQyRooMH9SXmgGZ6JA/s1600/Screenshot+(36).png'>
        <div class="slidertitle" id="title1">Sublime Text 3</div>
   
<img id="sliderImage2" 
src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixFz1zUyh7l3GslI132SPGrIXvP_IbyHHgDrAxphQR6r0WnDDLrgvlxTMUF4PaRiGHx5guGHxUBUwZK7KlTXffSRHvNPgXXJ-XWVOl3CtkBPfnpx5X5TP7toLLu4-Wz42SGFMTAW13aw/s1600/Screenshot+(35).png'>
        <div class="slidertitle" id="title2">Zebra Tabel</div>
   
<img id="sliderImage3" 
src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUAcfSeIVgu5MZZ6fAtZ1AeWRoRSAq9I84udxmkLk5ZEpooJxzX6zpZBs-kBbphznhMI3AvhjHA58jWqAVm97njtT5a6RrMk7-7e8Q36rTTS31zvSPIUCt63VMtIqeOB2tn4JZ3aXJhw/s1600/2.png'>
        <div class="slidertitle" id="title3">phpmyadmin</div>
</div>


</div>
<script crossorigin='anonymous' integrity='sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo' src='https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js'></script>
<script crossorigin='anonymous' integrity='sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6' src='https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js'></script>

</body>
</html>

Edit This