Manual Slideshow Images
CSS
<style>
.p-content{max-width:980px;margin:auto;position:relative}
img.mySlideshow { /* Size gambar */
width:100%;height:200px}
.tombol-slider{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:inline-block;text-align:center;color:#fff;background-color:#000;position:relative;overflow:hidden;z-index:1;padding:0;border-radius:50%;cursor:pointer;font-size:24px;width:40px;height:40px;line-height:40px}
</style>
HTML
<div class="p-content"> <img class="mySlideshow" src="http://ykub.xtgem.com/BLOG/images/xtgenerator.png"> <img class="mySlideshow" src="http://ykub.xtgem.com/HOME/images/logo-1.jpg"> <img class="mySlideshow" src="http://ykub.xtgem.com/xtblog.jpg"> <a class="tombol-slider" style="position:absolute;top:45%;left:0" onclick="plusDivs(-1)">❮</a> <a class="tombol-slider" style="position:absolute;top:45%;right:0" onclick="plusDivs(1)">❯</a> </div>
JAVASCRIPT
<script>
var slideIndex = 1;
showDivs(slideIndex);
function plusDivs(n) {
showDivs(slideIndex += n);
}
function showDivs(n) {
var i;
var x = document.getElementsByClassName("mySlideshow");
if (n > x.length) {slideIndex = 1}
if (n < 1) {slideIndex = x.length} ;
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
x[slideIndex-1].style.display = "block";
}
</script>
Artikel menarik lainnya
Papa Syila
