Funny Photo Slide and Here Cade For Post Slideshow Photo HTML Java Script

1 / 3

Dog surprised to see fish

2 / 3

The cat laughs

3 / 3

The other one says "my favorite food"

❮ ❯

Copy and paste the code below in the post in HTML, then just change the desired image url, then publish the post

You can also add an image. Note the red text for the image url, blue text to add the image title. Here's the code: 

<style>

* {box-sizing:border-box}

/* Slideshow container */

.slideshow-container {

  max-width: 1000px;

  position: relative;

  margin: auto;

}

/* Hide the images by default */

.mySlides {

  display: none;

}

/* Next & previous buttons */

.prev, .next {

  cursor: pointer;

  position: absolute;

  top: 50%;

  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;

}

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

} 

</style>

<div class="slideshow-container">

  <!--Photo slideshow responsive ( Bisa kalian Tambahkan atau kurangkan )-->

  <div class="mySlides fade">

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

    <img src="image url" style="width: 100%;" />

    <div class="text">image title 1</div>

  </div>

  <div class="mySlides fade">

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

    <img src="image url" style="width: 100%;" />

    <div class="text">image title 2</div>

  </div>

  <div class="mySlides fade">

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

    <img src="image url" style="width: 100%;" />

    <div class="text">image title 3</div>

  </div>

  

  <!--Tombol Next and previous-->

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

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

</div>

<br />

<!--Titik lingkaran (Bisa kalian tambahkan atau kurangkan )-->

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

// Next/previous controls

function plusSlides(n) {

  showSlides(slideIndex += n);

}

// Thumbnail image controls

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>