Cara Membuat Slideshow / Carousel (4 Model)

Sudah sejak lama saya ingin menerapkan Slideshow ini ke blog tapi entah kenapa malas banget rasanya.

Di Blogger, slideshow ini dapat diterapkan ke Related Posts ataupun ke Popular Posts (untuk yang ingin mendapatkan tampilan berbeda dari keumumannya tentunya), saya sendiri terpikir untuk mengisinya dengan berbagai list video tapi saya urungkan karena ya itu tadi penyakit 5 huruf M.A.L.A.S, hihi.

Tapi kodenya tetap saya simpan dan koleksi dulu di post ini siapa tau suatu saat R.A.J.I.N jadi tinggal pasang saja.

Slideshow atau Carousel memiliki beberapa model/tipe.

1. Manual, yang jika ikon panahnya di tap akan bergeser manual kekanan dan balik lagi kekiri jika sudah mencapai batas.

2. Otomatis, yang akan bergeser otomatis dengan sendirinya memperlihatkan menu-menu yang ada.

3. Multiple, dua buah slideshow manual.

4. Lightbox (Modal Image Gallery), ini model seperti tampilan gallery di ponsel, cocoknya untuk dipasang di situs fotografi atau fotografer yang hobi berbagi foto hasil jepretannya.

Umumnya web biasanya cenderung memilih nomor 2 yaitu slideshow otomatis. Sebetulnya tidak hanya bisa dipasang di web seperti blog saja tapi juga pada pembuatan aplikasi smartphone.

Tapi kode yang saya simpan disini hanya model manual dan otomatis saja, bagi agan yang menginginkan model lainnya silakan ambil disitus resminya https://www.w3schools.com/howto/howto_js_slideshow.asp

Baiklah, berikut ini kode manual dan otomatis slideshow. Kode masih perawan sama persis dengan di web resminya. Kode terdiri dari Css, Html dan Javascript. Silakan sesuaikan, silakan ganti url gambarnya dengan yang aktif, dll.

Manual Slideshow

<style>

* {box-sizing: border-box}

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

.mySlides {display: none}

img {vertical-align: middle;}

/* 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;

  user-select: none;

}

/* 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: 15px;

  width: 15px;

  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}

}

</style>

<div class="slideshow-container">

<div class="mySlides fade">

  <div class="numbertext">1 / 3</div>

  <img src="img_nature_wide.jpg" style="width:100%">

  <div class="text">Caption Text</div>

</div>

<div class="mySlides fade">

  <div class="numbertext">2 / 3</div>

  <img src="img_snow_wide.jpg" style="width:100%">

  <div class="text">Caption Two</div>

</div>

<div class="mySlides fade">

  <div class="numbertext">3 / 3</div>

  <img src="img_mountains_wide.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>

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

Automatic Slideshow

<style>

* {box-sizing: border-box;}

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

.mySlides {display: none;}

img {vertical-align: middle;}

/* Slideshow container */

.slideshow-container {

  max-width: 1000px;

  position: relative;

  margin: auto;

}

/* 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 {

  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}

}

/* On smaller screens, decrease text size */

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

  .text {font-size: 11px}

}

</style>

<div class="slideshow-container">

<div class="mySlides fade">

  <div class="numbertext">1 / 3</div>

  <img src="img_nature_wide.jpg" style="width:100%">

  <div class="text">Caption Text</div>

</div>

<div class="mySlides fade">

  <div class="numbertext">2 / 3</div>

  <img src="img_snow_wide.jpg" style="width:100%">

  <div class="text">Caption Two</div>

</div>

<div class="mySlides fade">

  <div class="numbertext">3 / 3</div>

  <img src="img_mountains_wide.jpg" style="width:100%">

  <div class="text">Caption Three</div>

</div>

</div>

<br>

<div style="text-align:center">

  <span class="dot"></span> 

  <span class="dot"></span> 

  <span class="dot"></span> 

</div>

<script>

var slideIndex = 0;

showSlides();

function showSlides() {

  var i;

  var slides = document.getElementsByClassName("mySlides");

  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, 2000); // Change image every 2 seconds

}

</script>