Cara Membuat Slideshow di Blog

masnasih.com - Dengan adanya Slideshow itu membuat blog menjadi cantik, maka saya tidak heran jika Anda mencari cara membuat slideshow di blog dengan javascript. Slideshow juga sebagai salah satu faktor UX (user experience) dari sebuah blog yang akan menjadi daya tarik tersendiri bagi blog tersebut. Di postingan ini saya ingin berbagi beberapa tampilan slideshow yang bisa Anda pilih sendiri sesuai dengan keinginan.

Cara Membuat Slideshow di Blog

Saya mengambil kodenya dari w3schools

Gambar tampilan slideshow dengan gambar horisontal di atas cocok untuk di halaman homepage baik web organisasi pribadi maupun web berita. Di kiri atas ada keterangan jumlah slide, kanan kiri ada navigasi untuk menggeser slideshow, dan di bawah tengah ada tulisan yang bisa diganti dengan keterangan slide, Di bawah teks juga ada tombol yang bisa di klik untuk ke slide tertentu

Untuk membuat slideshow seperti maka diperlukan kode html, css dan javascript. Berikut ini adalah kodenya.

Kode CSS

Untuk kode css bisa diletakkan di atas kode </b:skin> atau di bawah kode <b:skin>

* {box-sizing: border-box;}

body {font-family: Verdana, sans-serif;}

.Slideshow {display: none;}

img {vertical-align: middle;}

/* Slideshow container */

.slideshow-container {

  max-width: 1000px;

  position: relative;

  margin: auto;

}

/* Untuk Caption */

.text {

  color: #f2f2f2;

  font-size: 15px;

  padding: 8px 12px;

  position: absolute;

  bottom: 8px;

  width: 100%;

  text-align: center;

}

/* Jumlah Slide (1/3 etc) */

.numbertext {

  color: #f2f2f2;

  font-size: 12px;

  padding: 8px 12px;

  position: absolute;

  top: 0;

}

/* tombol di bawah caption */

.dot {

  height: 15px;

  width: 15px;

  margin: 0 2px;

  background-color: #bbb;

  border-radius: 50%;

  display: inline-block;

  transition: background-color 0.6s ease;

}

.active {

  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}

}

/* Di layar kecil maka ukuran text diperkecil menjadi */

@media only screen and (max-width: 300px) {

  .text {font-size: 11px}

}

Kode HTML

Kemudian untuk html bisa diletakkan di tempat yang anda inginkan, yang penting di antara tag body. Ini dia kodenya

<div class="slideshow-container">

<div class="slideshow fade">
  <div class="numbertext">1 / 3</div>
  <img src="pemandangan.jpg" style="width:100%">
  <div class="text">Slide 1</div>
</div>

<div class="slideshow fade">
  <div class="numbertext">2 / 3</div>
  <img src="lautan.jpg" style="width:100%">
  <div class="text">Slide 2</div>
</div>

<div class="slideshow fade">
  <div class="numbertext">3 / 3</div>
  <img src="gunung.jpg" style="width:100%">
  <div class="text">Slide 3</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>

Yang saya tandai warna orange adalah url gambar. Masukkan url gambar yang ingin Anda tampilkan

Kode Javascript

Dan yang terakhir adalah kode javascriptnya, diletakkan tepat di atas kode </body>. Ini adalah kodenya.

<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("slideshow");
  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>

Di atas adalah contoh slideshow yang simpel. Masih banyak lagi slideshow yang lebih keren daripada itu. Ini adalah contoh slideshow yang lebih keren.

Untuk membuat slideshow seperti gambar di atas, Anda bisa langsung lihat kodenya di sini.

Demikianlah Artikel tentang cara membuat slideshow di blog. Semoga bermanfaat.

Baca Artikel Blogging Lainnya.