Studi Informatika

Panduan Pembelajaran Ilmu Teknologi & Komputer

Friday, May 4, 2018

Cara Membuat Slide Atau Tampilan Yang Bisa Bergeser di HTML

Setelah sebelumnya kita sudah bahas Cara Membuat Button Dengan Isinya di HTML sekarang kita akan bahas cara membuat tampilan yang bisa bergeser biasa ini pada gambar, mungkin teman-teman sudah pernah lihat di web-web yang ada di internet.

Baca Juga : Cara Membuat Button Dengan Isinya di HTML

Pada cara kali ini saya akan membuat tema yang lagi populer dalam tahun 2018 yaitu world cup atau piala dunia 2018. Nah.. sekarang seperti biasa kita masih menggunakan notepad++ dan silahkan copy coding dibawah ini :

<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<style>
.mySlides {display:none}
.w3-left, .w3-right, .w3-badge {cursor:pointer}
.w3-badge {height:13px;width:13px;padding:0}
</style>
<body background="maskot.png">

<div class="w3-container">
 <center> <h2 style="color:black;">32 TIM PIALA DUNIA 2018</h2>
</div>
<div class="w3-content w3-display-container" style="max-width:800px">
<br></br>
<br></br>
  <img class="mySlides" src="1.png" style="width:60%">
  <img class="mySlides" src="2.png" style="width:60%">
  <img class="mySlides" src="3.png" style="width:60%">
  <img class="mySlides" src="4.png" style="width:60%">
  <img class="mySlides" src="5.png" style="width:60%">
  <img class="mySlides" src="6.png" style="width:60%">
  <img class="mySlides" src="7.png" style="width:60%">
  <img class="mySlides" src="8.png" style="width:60%">
  <img class="mySlides" src="9.png" style="width:60%">
  <img class="mySlides" src="10.png" style="width:60%">
  <img class="mySlides" src="11.png" style="width:60%">
  <img class="mySlides" src="12.png" style="width:60%">
  <img class="mySlides" src="13.png" style="width:60%">
  <img class="mySlides" src="14.png" style="width:60%">
  <img class="mySlides" src="15.png" style="width:60%">
  <img class="mySlides" src="16.png" style="width:60%">
  <img class="mySlides" src="17.png" style="width:60%">
  <img class="mySlides" src="18.png" style="width:60%">
  <img class="mySlides" src="19.png" style="width:60%">
  <img class="mySlides" src="20.png" style="width:60%">
   <img class="mySlides" src="21.png" style="width:60%">
  <img class="mySlides" src="22.png" style="width:60%">
  <img class="mySlides" src="23.png" style="width:60%">
  <img class="mySlides" src="24.png" style="width:60%">
  <img class="mySlides" src="25.png" style="width:60%">
  <img class="mySlides" src="26.png" style="width:60%">
  <img class="mySlides" src="27.png" style="width:60%">
  <img class="mySlides" src="28.png" style="width:60%">
  <img class="mySlides" src="29.png" style="width:60%">
  <img class="mySlides" src="30.png" style="width:60%">
  <img class="mySlides" src="31.png" style="width:60%">
  <img class="mySlides" src="32.png" style="width:60%">
  <div class="w3-center w3-container w3-section w3-large w3-text-white w3-display-bottommiddle" style="width:100%">
    <div class="w3-left w3-hover-text-khaki" onclick="plusDivs(-1)">&#10094;</div>
    <div class="w3-right w3-hover-text-khaki" onclick="plusDivs(1)">&#10095;</div>
    <span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(1)"></span>
    <span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(2)"></span>
    <span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(3)"></span>
  </div>
</div>
<br>
<center><a href="index.html"><button><< Back To Accordion</button></a></center>
<script>
var slideIndex = 1;
showDivs(slideIndex);

function plusDivs(n) {
  showDivs(slideIndex += n);
}

function currentDiv(n) {
  showDivs(slideIndex = n);
}

function showDivs(n) {
  var i;
  var x = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("demo");
  if (n > x.length) {slideIndex = 1}   
  if (n < 1) {slideIndex = x.length}
  for (i = 0; i < x.length; i++) {
     x[i].style.display = "none"; 
  }
  for (i = 0; i < dots.length; i++) {
     dots[i].className = dots[i].className.replace(" w3-white", "");
  }
  x[slideIndex-1].style.display = "block"; 
  dots[slideIndex-1].className += " w3-white";
}
</script>

</body>
</html>


Setelah di copy coding diatas pastekan ke notepad++ seperti gambar dibawah :

Oke.. setelah di copy ke notepad++ save notepad++ ini kedalam format html. Kemudian buka namun saya sarankan dengan google chroom karna lebih support, kemudian setelah di buka akan muncul tampilan seperti gambar di bawah:


Yang dimaksud bergeser adalah gambar pemain seperti gambar diatas hal ini mungkin sering ditemukan di website yang membutuhkan, silahkan dikreasikan sesuai tema blog atau web kita masing masing-masing.

Untuk isi dari semua dari materi ini jadikan dalam satu folder dan gabung kan juga dengan materi sebelumnya sehingga saat Go To Slide >> dan << Back To According akan bisa berfungsi, seperti gambar berikut:


Bagi yang ingin selalu update materi dan tutorial khususnya bidang ilmu komputer, silah bergabung di website kami dengan cara follow menggunakan akun google + yang ada di tampilan utama web ini atau di bagian bawah jika menggunkan hp.

Terima Kasih........


Friday, May 4, 2018 May 04, 2018 - tanpa komentar

No comments:

Post a Comment