Contoh
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='http://2.bp.blogspot.com/-VE8iwhjMnIQ/U2C0p9aWc2I/AAAAAAAAAfM/BMdbwcXu9Lo/s1600/Screenshot+(36).png'> <div class="slidertitle" id="title1">Sublime Text 3</div> <img id="sliderImage2" src='http://4.bp.blogspot.com/-_tnRAZc3HgQ/U1-ZB5DmbHI/AAAAAAAAAek/PPYlJ0TxvjE/s1600/Screenshot+(35).png'> <div class="slidertitle" id="title2">Zebra Tabel</div> <img id="sliderImage3" src='http://1.bp.blogspot.com/-TP36eoN0p3g/U19_mA9zb2I/AAAAAAAAAdw/PQ6wdKrY6Rk/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>