Slideshow Gambar Keren

Slideshow adalah sebuah trik untuk membagi konten menjadi beberapa elemen kemudian menambahkan fungsi sehingga konten tersebut dapat berubah dengan cara berganti elemen satu sama lain. Umumnya dalam halaman website, fungsi Slideshow diterapkan pada gambar, membuat beberapa gambar saling menimpa dengan CSS kemudian dikelola menggunakan Javascript.

Slideshow dapat digunakan sebagai desain interaktif di halaman blog. Contohnya dalam artikel Laptop Multimedia Terbaik, disana Syams menggunakan Slideshow untuk membagi beberapa gambar laptop, kemudian dipisahkan dengan fungsi tombol untuk mengganti gambarnya ke gambar yang lain.

Bermodalkan CSS dan Javasrcipt yang sederhana, ada beberapa teknik untuk membuat Slideshow Gambar yang keren dan unik sehingga bisa ditampilkan pada website. Bagi Agan yang sedang mencari tutorial atau kode yang dapat dipakai agar dapat menampilkan Slideshow pada halaman web atau blog pribadi, Agan berada di artikel yang tepat.

TUTORIAL

Slideshow dengan Caption dan Button


Trik Slideshow gambar yang pertama berupa Slideshow yang memiliki tombol Next-Prev di kanan-kiri dan Radio Button di bagian bawah untuk mengganti gambar yang menjadi bagian dari slide. Slideshow ini juga dilengkapi Caption atau pesan yang bisa dimasukkan sebagai keterangan pada tiap gambar. Kekurangannya, Slideshow ini cuma berfungsi satu untuk tiap halaman website.

CSS 
<style>
#slideshow {max-width:1000px;margin:auto}
#slideshow *{box-sizing:border-box}

/* GAMBAR */
#slideshow .gambar{position:relative}
#slideshow .gambar .mySlides {position:relative;display: none}
#slideshow .gambar .mySlides img{max-width:100%}

/* PREV-NEXT */
#slideshow .prev,
#slideshow .next {position:absolute;top:50%;cursor:pointer;width:auto;margin-top:-22px;padding:16px;color:white;font-weight:bold;font-size:18px;transition:0.6s ease;border-radius:0 3px 3px 0;user-select:none}
#slideshow .prev:before {content:"\276E"}
#slideshow .next:before {content:"\276F"}
#slideshow .next{right:0;border-radius:3px 0 0 3px}
#slideshow .prev:hover,
#slideshow .next:hover {background-color:rgba(0,0,0,0.8)}

/* NOMOR-CAPTION */
#slideshow .number{color:#f2f2f2;font-size:12px;padding:10px;position:absolute;top:0}
#slideshow .caption {position:absolute;bottom:0;color:#f2f2f2;font-size:15px;padding:10px;width:100%;text-align:center}

/* TOMBOL */
#slideshow .button{text-align:center;padding:10px}
#slideshow .button .dot {cursor:pointer;height:15px;width:15px;margin:0 2px;background-color:#bbb;border-radius:50%;display:inline-block;transition:background-color 0.6s ease}
#slideshow .button .dot.active,
#slideshow .button .dot:hover {background-color: #717171;}

/* FADING (ANIMASI) */
#slideshow .gambar .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}
}
</style>

HTML 
<div id="slideshow">
<div class="gambar">
  <div class="mySlides fade">
    <div class="number">1 / 3</div>
    <img src="*** LINK GAMBAR ***">
    <div class="caption">CAPTION TEKS 1</div>
  </div>
  <div class="mySlides fade">
    <div class="number">2 / 3</div>
    <img src="*** LINK GAMBAR ***">
    <div class="caption">CAPTION TEKS 2</div>
  </div>
  <div class="mySlides fade">
    <div class="number">3 / 3</div>
    <img src="*** LINK GAMBAR ***">
    <div class="caption">CAPTION TEKS 3</div>
  </div>
  <a class="prev" onclick="plusSlides(-1)"></a>
  <a class="next" onclick="plusSlides(1)"></a>
</div>
<div class="button">
  <span class="dot" onclick="currentSlide(1)"></span>
  <span class="dot" onclick="currentSlide(2)"></span>
  <span class="dot" onclick="currentSlide(3)"></span>
</div>
</div>

Javascript 
<script>
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";
}
</script>

SLIDESHOW KEREN
1 / 3
LAPTOP SATU
2 / 3
LAPTOP DUA
3 / 3
LAPTOP TIGA



Slideshow Ganda Dalam Satu Halaman Web


Slideshow gambar kedua lebih minimalis, Radio Button dan Caption dihilangkan, tapi kelebihannya fungsi slide-nya bisa diterapkan berkali-kali dalam satu halaman website. Slideshow ini yang juga Syams gunakan pada artikel contoh di bagian Intro.

Untuk bisa menambah daftar Slideshow, harap perhatikan warna hijau dan keterangan yang terdapat dalam kode. Setiap menambah Slideshow maka kode yang ditandai tersebut harus ditambah atau diganti karena berperan penting membuat fungsi Slideshow bekerja dengan baik.

CSS 
<style>
.slideshow {max-width:1000px;margin:auto}
.slideshow *{box-sizing:border-box}

/* GAMBAR */
.slideshow .gambar{position:relative}
.slideshow .gambar .mySlides {position:relative;display: none}
.slideshow .gambar .mySlides img{max-width:100%}

/* PREV-NEXT */
.slideshow .prev,
.slideshow .next {position:absolute;top:50%;cursor:pointer;width:auto;margin-top:-22px;padding:16px;color:white;font-weight:bold;font-size:18px;transition:0.6s ease;border-radius:0 3px 3px 0;user-select:none}
.slideshow .prev:before {content:"\276E"}
.slideshow .next:before {content:"\276F"}
.slideshow .next{right:0;border-radius:3px 0 0 3px}
.slideshow .prev:hover,
.slideshow .next:hover {background-color:rgba(0,0,0,0.8)}
</style>

HTML 
<div class="slideshow">
<div class="gambar">
  <div class="mySlides Show1">
    <img src="*** LINK GAMBAR ***">
  </div>
  <div class="mySlides Show1">
    <img src="*** LINK GAMBAR ***">
  </div>
  <div class="mySlides Show1">
    <img src="*** LINK GAMBAR ***">
  </div>
  <a class="prev" onclick="plusSlides(-1,0)"></a>
  <a class="next" onclick="plusSlides(1,0)"></a>
</div>
</div>
<br>
<div class="slideshow">
<div class="gambar">
  <div class="mySlides Show2">
    <img src="*** LINK GAMBAR ***">
  </div>
  <div class="mySlides Show2">
    <img src="*** LINK GAMBAR ***">
  </div>
  <div class="mySlides Show2">
    <img src="*** LINK GAMBAR ***">
  </div>
  <a class="prev" onclick="plusSlides(-1,1)"></a>
  <a class="next" onclick="plusSlides(1,1)"></a>
</div>
</div>
<br>
<div class="slideshow">
<div class="gambar">
  <div class="mySlides Show3">
    <img src="*** LINK GAMBAR ***">
  </div>
  <div class="mySlides Show3">
    <img src="*** LINK GAMBAR ***">
  </div>
  <div class="mySlides Show3">
    <img src="*** LINK GAMBAR ***">
  </div>
  <a class="prev" onclick="plusSlides(-1,2)"></a>
  <a class="next" onclick="plusSlides(1,2)"></a>
</div>
</div>

Javascript 
<script>
var slideIndex = [1,1,1]; // TAMBAH "1" SETIAP ADA TAMBAHAN SLIDESHOW
var slideId = ["Show1", "Show2","Show3"] // TAMBAH "Show[no]" SETIAP ADA TAMBAHAN SLIDESHOW
showSlides(1, 0);
showSlides(1, 1);
showSlides(1, 2);
// TAMBAH "showSlides(1,[no])" SETIAP ADA TAMBAHAN SLIDESHOW

function plusSlides(n, no) {
  showSlides(slideIndex[no] += n, no);
}

function showSlides(n, no) {
  var i;
  var x = document.getElementsByClassName(slideId[no]);
  if (n > x.length) {slideIndex[no] = 1}
  if (n < 1) {slideIndex[no] = x.length}
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
  x[slideIndex[no]-1].style.display = "block";
}
</script>

SLIDESHOW GANDA




Demikian Cara Membuat Slideshow Gambar Keren Pada Blog yang bisa Agan pakai kodenya pada website atau blog pribadi sesuai kebutuhan. Bagi yang masih bingung dengan penggunaan struktur kode di atas, silahkan download saja kodenya melalui link Unduh yang sudah disiapkan. Di dalamnya terdapat file HTML dengan script fungsi Slideshow yang sudah tersusun rapi.

Slideshow Gambar ini memiliki sifat responsive sehingga bisa diterapkan dimana saja baik pada halaman Homepage, Widget atau Post Blog. Trik ini selain dapat mempermudah pengunjung mengakses gambar yang berbeda, juga menata desain halaman web agar lebih keren sehingga membuat pengunjung lebih tertarik menikmati konten yang disajikan.