Animated image slideshow using js
html-and-cssjavascriptprojects

Animated image slideshow using js

Jul,30th,2022

In this tutorial we're going to learn how we can create animated image slideshow using only html css and javascript

Click here to get starter files

🔗First let’s create the skeleton of the ui

Markup of slideshow

html
<div class="slideshow-container">
  <div class="mySlides .tilt-in-top-1">
    <div class="numbertext">1 / 3</div>
    <img src="1.jpg" style="width: 100%;" />
    <div class="text">Caption Text</div>
  </div>


  <div class="mySlides .tilt-in-top-1">
    <div class="numbertext">2 / 3</div>
    <img src="2.jpg" style="width: 100%;" />
    <div class="text">Caption Two</div>
  </div>


  <div class="mySlides .tilt-in-top-1">
    <div class="numbertext">3 / 3</div>
    <img src="3.jpg" style="width: 100%;" />
    <div class="text">Caption Three</div>
  </div>
</div>

🔗Let’s add styling into the ui

Basic styling

css
* {
  box-sizing: border-box;
}


body {
  font-family: Verdana, sans-serif;
  margin: 0;
  background: rgb(25, 93, 106);
  background: radial-gradient(
    circle,
    rgba(25, 93, 106, 1) 38%,
    rgba(35, 35, 62, 1) 91%
  );
  margin-top: 4%;
}


img {
  vertical-align: middle;
}

Styling for slideshow container

css
.slideshow-container {
  max-width: 800px;
  position: relative;
  margin: auto;
}

Styling for image caption text and number text

css
.text {
  color: #f2f2f2;
  background: linear-gradient(270deg, rgb(33 59 119) 0%, rgb(28 102 44) 100%);
  max-width: inherit;
  font-size: 15px;
  padding: 8px 12px;
  position: relative;
  bottom: 8px;
  width: 100%;
  text-align: center;
}


.numbertext {
  background: linear-gradient(270deg, rgb(33 59 119) 0%, rgb(28 102 44) 100%);
  max-width: max-content;
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

Animation for animating image

css
.tilt-in-top-1 {
  animation: tilt-in-top-1 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}


@keyframes tilt-in-top-1 {
  0% {
    transform: rotateY(30deg) translateY(-300px) skewY(-30deg);
    opacity: 0;
  }


  100% {
    transform: rotateY(0deg) translateY(0) skewY(0deg);
    opacity: 1;
  }
}

🔗Let’s write javascript code to create functionality for showslide , prev next button , loop slideshow

Function for show slide

We want to show slide with only 1 image at a time let’s write javascript code for that

js
/* init slideIndex assign to default 1  */
var slideIndex = 1;


function showSlides() {
  var slides = document.getElementsByClassName("mySlides");
  // for demo purpose
  console.log(typeof slides + " " + slides.length);


  /* hiding all images by default using display none and for loop */
  for (var i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
    // console.log(slides[i])
  }


  slides[slideIndex - 1].style.display = "block";
  // console.log(`slide index ${slideIndex - 1}`);
}
showSlides();

In above javascript code we just

  • init slideIndex and assign to 1 we’ll use slideIndex value and change dynamically to change slide ( prev and next ) later in this tutorial
  • Created function for showSlide and getting dom elements by using getElementByClassName and assigning to slides
  • Hiding all images by default using display none and for loop method
  • Changed visibility of none to block of first index of slides ( slideIndex = 1 - 1 = 0 ) [ slideIndex change dynamically every time when we update value of slideIndex using changeSlide function what we’ll create later in this tutorial ]
show slide

Let’s create next and prev button to change slide

Markup of next prev button

Add below html code inside slideShow-container div and adding onclick by calling changeSlide function and passing value as an argument

html
<a class="prev" onclick="changeSlide(-1)">&#10094;</a>
<a class="next" onclick="changeSlide(1)">&#10095;</a>

Styling next prev button

css
/* Next & previous buttons */
.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  border: 1px solid #ccc;
  background-color: #4f7d8b5e;
  width: auto;
  margin-left: -100px;
  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;
  margin-right: -100px;
  border-radius: 3px 0 0 3px;
}


/* On hover, add a black background color*/
.prev:hover,
.next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}
next prev button

Function for change slide

js
function changeSlide(n) {
  showSlides((slideIndex += n));
  // for demo purpose
  console.log(`slideIndex ` + slideIndex);
}

In above javascript code we created function for changeSlide and getting a value of n by calling onclick event from anchor tag next , prev button then calling showSlides function and assigning slideIndex = slideIndex + value of n using addition assignment operator ( += )

With changeSlide function we changing a value of slideIndex dynamically so that we can change the visibility of that specific of image slideIndex by calling showSlides function

Now it’s working as expected

But here we have one small problem that script.js:19 Uncaught TypeError: Cannot read properties of undefined (reading 'style') the reason behind this error is no slide of that slideIndex found in other word we have only 3 image in slideShow and 1st image which is 0 index of when we click next button we getting second of which is 1 index , 3rd image which is 2nd index of slides but when we again click next button we’re not getting any image because we don’t have any image on that index that’s the reason we’re getting this error to solve this we have to pass condition to loop a slideShow

Condition to loop slideshow

We have to pass n as an parameter in function and get the value of n by calling function and passing slideIndex as an argument

Update slideShow function calling as follow below

js
showSlides(slideIndex);

Update showSlides function as follow below

js
function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  console.log(typeof slides + " " + slides.length);


  // let's write condition to loop a slideshow
  // when n is greater than slides.length then value of slideIndex should be 1
  if (n > slides.length) {
    slideIndex = 1;
  }
  // when n is less than 1 then value of slideIndex should be equal to slides.length
  if (n < 1) {
    slideIndex = slides.length;
  }


  /* hiding all images by default using display none  */
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
    // console.log(slides[i])
  }


  slides[slideIndex - 1].style.display = "block";
  // console.log(`slide index ${slideIndex - 1}`);
}

Now it’s working perfect ✌

Congratulation we have successfully created animated image slideshow 🥳

Download source code