Membuat Slideshow / Carousel Sederhana Dengan Javascript

Pada kesempatan ini admin akan berbagi bagiamana cara membuat slideshow dengan javascript, dan yang akan saya share ini bukanlah sebuah slideshow yang mewah tetapi slideshow yang akan saya bagikan ini adalah sebuah slideshow yang sederhana dan scriptnya pun tidak terlalu panjang

Dengan slideshow ini kita dapat membuat sebuah gambar dengan bergantian dan ketika gambar tersebut berganti ada sebuah effect yang ditambahkan, Admin akan berbagi 2 tutorial yang pertama membuat slideshow yang dimana kita harus click 1 per 1 agar gambar tersebut berganti dan yang kedua gambar tersebut akan berganti secara otomatis sesuai keinginan kita berapa lama gambar tersebut akan berganti.

TAHAP PELAKSANAAN
1. Pertama kita buka terlebih dahulu Text Editor kita ( Sublime Text, Notepad ++ dll )
2.  Kita berikan sentuhan HTML

 <div class="slideshow-container">
  <div class="mySlides fade">
    <div class="numbertext">1 / 3</div>
    <img src="img1.jpg" style="width:100%">
    <div class="text">Caption Text</div>
  </div>

  <div class="mySlides fade">
    <div class="numbertext">2 / 3</div>
    <img src="img2.jpg" style="width:100%">
    <div class="text">Caption Two</div>
  </div>

  <div class="mySlides fade">
    <div class="numbertext">3 / 3</div>
    <img src="img3.jpg" style="width:100%">
    <div class="text">Caption Three</div>
  </div>

  <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
  <a class="next" onclick="plusSlides(1)">&#10095;</a>
</div>
<br>

<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>

3. Kita berikan senutuhan css

* {box-sizing:border-box}
body {font-family: Verdana,sans-serif;margin:0}
.mySlides {display:none}

/* Slideshow container */
.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.dot {
  cursor:pointer;
  height: 13px;
  width: 13px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #717171;
}

/* Fading animation */
.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}
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .prev, .next,.text {font-size: 11px}
}

4.Kita berikan sentuhan Javascript

var slideIndex = 1;
showSlides(slideIndex);

function plusSlides(n) {
  showSlides(slideIndex += n);
}

function currentSlide(n) {
  showSlides(slideIndex = n);
}

function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("dot");
  if (n > slides.length) {slideIndex = 1}
  if (n < 1) {slideIndex = slides.length}
  for (i = 0; i < slides.length; i++) {
      slides[i].style.display = "none";
  }
  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";
}

5. Jika sobat ingin membuat slideshow berganti secara otomatis gunakan script berikut

var slideIndex = 0;
showSlides();

function showSlides() {
    var i;
    var slides = document.getElementsByClassName("mySlides");
    for (i = 0; i < slides.length; i++) {
        slides[i].style.display = "none";
    }
    slideIndex++;
    if (slideIndex> slides.length) {slideIndex = 1}
    slides[slideIndex-1].style.display = "block";
    setTimeout(showSlides, 2000); // Change image every 2 seconds
}

PENJELASAN
1. Kita membuat sebuah script html yaitu struktur dari slideshow tersebut sobat dapat merubah isi dari <img src=" "> dan ganti dengan gambar yang sobat inginkan
2. Setelah itu kita memberikan CSS agar slideshow tersebut terlihat lebih cantik dan peletakannya pun juga bagus, selain itu agar slideshow tersebut bisa responsive
3. Javascript diatas berguna untuk membuat fungsi dari slideshow tersebut yaitu ketika tombol next diklik maka akan muncul gambar yang ke dua, seperti itulah kegunaan dari javascript yang kita buat.
4. Jika sobat ingin mengganti waktu perbahan gambar silahkan ganti pada " setTimeout(showSlides, 2000); >> 2000 ganti waktu yang sobat inginkan, 2000 itu menandakan 2 detik , jika sobat ingin mengganti menjadi 5 detik berarti ganti jadi 5000


DOWNLOAD DEMO
Yak itulah tutorial membuat slideshow dengan javascript jika sobat memiliki pertanyaan silahkan berikan komentar pada kolom komentar dibawah

Referensi : w3schools