XtGem Forum catalog

Manual Slideshow Images

Untuk tampilan slide show gambar ini menggunakan fitur tombol untuk melihat gambar yang disediakan, ukuran gambar dapat di ubah lewat Css, kehebatan Javascript slider disini yang berperan penting sebagai pengendali.

❮ ❯



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



Bagikan Ke :