How To Create a Slideshow in Laravel ?

May 22, 2021

Apa itu slider?

Sliders (atau bisa disebut juga carousel) adalah satu dari sekian fitur yang simpel dan mudah digunakan. Satu slider menampilkan kumpulan gambar yang ‘berjalan’ jika Anda mengklik suatu button atau secara otomatis karena menerapkan transisi. Dengan kata lain, slider adalah slideshow gambar.

Kelebihannya :

Urutan gambar (film bingkai) dapat diubah-ubah sesuai dengan kebutuhan.
Isi pelajaran yang sama terdapat dalam gambar-gambar film bingkai dapat disebarkan dan digunakan tempat secara bersamaan.
Gambar pada film bingkai tertentu dapat ditayangkan lebih lama dan dengan demikian dapat menarikperhatian dan membangun persepsi siswa yang sama terhadap konsep atau pesan yang ingin disampaikan.
Film bingkai dapat ditayangkan pada ruangan masih terang (tidak terlalu benar-benar gelap). Jika tidak terdapat layar khusus, dinding pun dapat dijadikan tempat proyeksi gambar.
Film bingkai dapat menyajikan gambar dan grafik untuk berbagai bidang ilmu kepada kelompok atau perorangan dengan usia yang tidak terbatas.
Film bingkai dapat digunakan sendiri atau digabung dengan suara / rekaman. Baik film bingkai bersuara maupun yang tidak, dapat diubah.
Film bingkai dapat menyajikan peristiwa masa lalu atau peristiwa di tempat lain. Di samping itu, dengan film bingkai, objek yang besar, berbahaya, atau terlalu kecil untuk dilihat dengan mata dapat ditayangkan dengan jelas.

· Kekurangannya :

Gambar dan grafik visual yang disajikan tidak bergerak sehingga daya tariknya tidak sekuat dengan televisi atau film. Oleh karena itu, visualisasi objek atau proses yang bergerak akan kurang efektif bila disajikan melalui media film bingkai.
Film bingkai terlepas-lepas,dan ini merupakan suatu titik keunggulan sekaligus kelemahannya, karena memerlukan perhatian untuk penyimpanannya agar film-film itu tidak hilang atau tercecer.
Meskipun biaya produksinya tidak terlihat mahal, film bingkai masih memerlukan biaya lebih besar daripada pembuatan media foto, gambar, grafik, yang tidak diproyeksikan.

Cara membuat slider pada laravel :

Berikut codenya:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<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>
</head>
<body>

<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)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</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>

</body>
</html>

Hasilnya :

Foto pertama

Foto kedua

Foto ketiga