Cara Membuat Kutipan Slideshow Pada Website

Di bawah ini kita akan mempelajari cara membuat slideshow kutipan dengan CSS dan JavaScript.

Kutipan Slideshow

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

/* Slideshow container */
.slideshow-container {
  position: relative;
  background: #f1f1f1f1;
}

/* Slides */
.mySlides {
  display: none;
  padding: 80px;
  text-align: center;
}

/*Tombol berikutnya dan sebelumnya */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -30px;
  padding: 16px;
  color: #888;
  font-weight: bold;
  font-size: 20px;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

/* Posisikan "tombol berikutnya" di sebelah kanan*/
.next {
  position: absolute;
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* Saat mengarahkan kursor, tambahkan background warna hitam dengan sedikit opacity */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
  color: white;
}

/* The dot/bullet/indicator container */
.dot-container {
    text-align: center;
    padding: 20px;
    background: #ddd;
}

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

/* Tambahkan background warna ke titik / lingkaran aktif */
.active, .dot:hover {
  background-color: #717171;
}

/* Tambahkan gaya font miring ke semua tanda kutip */
q {font-style: italic;}

/* Tambahkan warna biru ke penulis */
.author {color: cornflowerblue;}
</style>
</head>
<body>

<div class="slideshow-container">

<div class="mySlides">
  <q>Kalau kau terus berpikir dan tak melakukan apa-apa, kau akan tertinggal jauh</q>
  <p class="author">- Killua(Hunter x Hunter)</p>
</div>

<div class="mySlides">
  <q>Memiliki kekuatan terlalu hebat itu membosankan.</q>
  <p class="author">- Saitama( One Punch Man )</p>
</div>

<div class="mySlides">
  <q>Tidak ada tombol atur ulang dalam hidup, tetapi setidaknya kita dapat mengatur ulang suatu hubungan . Percayalah, saya tahu.</q>
  <p class="author">- Hikigaya Hachiman(My Teen Romantic Comedy)</p>
</div>

<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>

</div>

<div class="dot-container">
  <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>

Buat Kutipan Slideshow

Langkah 1) Tambahkan HTML:
Contoh

<!-- Slideshow container -->
<div class="slideshow-container">

  <!-- Full-width slides/quotes -->
  <div class="mySlides">
  <q>Kalau kau terus berpikir dan tak melakukan apa-apa, kau akan tertinggal jauh</q>
  <p class="author">- Killua(Hunter x Hunter)</p>
</div>

<div class="mySlides">
  <q>Memiliki kekuatan terlalu hebat itu membosankan.</q>
  <p class="author">- Saitama( One Punch Man )</p>
</div>

<div class="mySlides">
  <q>Tidak ada tombol atur ulang dalam hidup, tetapi setidaknya kita dapat mengatur ulang suatu hubungan . Percayalah, saya tahu.</q>
  <p class="author">- Hikigaya Hachiman(My Teen Romantic Comedy)</p>
</div>

  <!-- Tombol berikutnya / sebelumnya -->
  <a class="prev" onclick="plusSlides(-1)">❮</a>
  <a class="next" onclick="plusSlides(1)">❯</a>
</div>

<!-- Dots/bullets/indicators -->
<div class="dot-container">
  <span class="dot" onclick="currentSlide(1)"></span>
  <span class="dot" onclick="currentSlide(2)"></span>
  <span class="dot" onclick="currentSlide(3)"></span>
</div>

Langkah 2) Tambahkan CSS:
Beri gaya pada slide, tombol, titik, dll:
Contoh

/* Slideshow container */
.slideshow-container {
  position: relative;
  background: #f1f1f1f1;
}

/* Slides */
.mySlides {
  display: none;
  padding: 80px;
  text-align: center;
}

/*Tombol berikutnya dan sebelumnya */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -30px;
  padding: 16px;
  color: #888;
  font-weight: bold;
  font-size: 20px;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

/* Posisikan "tombol berikutnya" di sebelah kanan*/
.next {
  position: absolute;
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* Saat mengarahkan kursor, tambahkan background warna hitam dengan sedikit opacity */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
  color: white;
}

/* The dot/bullet/indicator container */
.dot-container {
    text-align: center;
    padding: 20px;
    background: #ddd;
}

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

/* Tambahkan background warna ke titik / lingkaran aktif */
.active, .dot:hover {
  background-color: #717171;
}

/* Tambahkan gaya font miring ke semua tanda kutip */
q {font-style: italic;}

/* Tambahkan warna biru ke penulis */
.author {color: cornflowerblue;}

Langkah 3) Tambahkan JavaScript:
Contoh

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";
}

CSS How To

Cara Membuat Kutipan Slideshow Pada Website

Kutipan Slideshow

Buat Kutipan Slideshow

Cara Menutup Item List Pada Sebuah Website

Cara Membuat Section Counter Pada Website

You may also like