Tutorial Membuat Slideshow Dengan Javascript

0
250

Kali ini saya membuat tutorial slideshow dengan javascript dan menggunakan html, css untuk membuat tampilan lebih menarik. Slideshow biasa digunakan untuk header pada website.

PERSIAPAN

Buatlah folder slideshow untuk menyimpan file index.html dan style.css

Siapkan text editor yang biasa anda gunakan.

Siapkan juga gambar dan simpan di folder img seperti berikut.

MEMBUAT HALAMAN UTAMA

Tulislah kode html berikut dan simpan file dengan nama index.html

<!DOCTYPE html>
<html>
<head>
  <title>Slideshow</title>
  <link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
  <div class="container">
    <div class="slide fade">
      <div class="number">1/3</div>
      <img src="img/3.jpg">
      <div class="caption">Caption Text</div>
    </div>
    <div class="slide fade">
      <div class="number">2/3</div>
      <img src="img/2.jpg">
      <div class="caption">Caption Two</div>
    </div>
    <div class="slide fade">
      <div class="number">3/3</div>
      <img src="img/1.jpg">
      <div class="caption">Caption Three</div>
    </div>

    <div style="text-align: center;">
      <span class="dot" onclick="currentSlide(1)"></span>
      <span class="dot" onclick="currentSlide(2)"></span>
      <span class="dot" onclick="currentSlide(3)"></span>
    </div>
  </div>
  <script type="text/javascript">
    var slideIndex = 0;
    showSlides();

    function showSlides() {
      var i;
      var slides = document.getElementsByClassName('slide');
      var dots = document.getElementsByClassName('dot');
      for (i = 0; i < slides.length; i++) {
       	slides[i].style.display = "none";
       } 
       slideIndex++;
       if (slideIndex> slides.length) {slideIndex = 1}
       for (i = 0; i < dots.length; i++) {
       	dots[i].className = dots[i].className.replace(" active","");
       }
       slides[slideIndex-1].style.display = "block";
       dots[slideIndex-1].className += " active";
       setTimeout(showSlides, 4000);
    }
  </script>
</body>
</html>

 

*Keterangan : Sintaks javascript terdapat di file tersebut.

Selanjutnya kita buat file baru dan tuliskan kode css berikut ini. Lalu buat folder css lalu simpan kode css ini di dalam folder css dengan nama style.css

* {
  margin: 0;
  padding: 0;
}
.container {
  width: 100%;
  margin: auto;
  padding: 0;
}
img {
  width: 100%;
  height: 400px;
}
.number {
  margin-bottom: -40px;
  position: absolute;
  margin: 16px 16px;
  font-family: arial;
  font-size: 20px;
  color: #fff;
}
.caption {
  font-family: arial;
  font-size: 20px;
  color: #fff;
  text-align: center;
  margin-top: -40px;
}
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}
@-webkit-keyframes fade {
  from {opacity: .4;}
  to {opacity: 1}
}
@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

 

Maka setelah semua kode sudah ditulis buka file index.html dengan browser tampilan nya akan seperti berikut:

Nah sekarang anda sudah berhasil membuat slideshow. Selamat belajar.

Terima Kasih telah membaca.

***PIU***

 

LEAVE A REPLY

Please enter your comment!
Please enter your name here