How To Create A Slideshow With HTML, CSS and Javascript

A slideshow is used to cycle between elements, being images, videos or presentation.

Learn How To Create a Responsive Slideshow with CSS and Javascript. HTML is a must have 😎.

CREATING A SLIDESHOW

1.  Let's create our HTML content. This is what our browser will be displaying. Our CSS and Javascript files are include to interpreted through our HTML file.

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

  <!-- Full-width images with number and caption text -->
  <div class="mySlides fade">
    <div class="numbertext">1 / 3</div>
    <img src="img1.jpg" style="width:100%">
    <div class="text">Caption Text</div>
  </div>

  <div class="mySlides fade">
    <div class="numbertext">2 / 3</div>
    <img src="img2.jpg" style="width:100%">
    <div class="text">Caption Two</div>
  </div>

  <div class="mySlides fade">
    <div class="numbertext">3 / 3</div>
    <img src="img3.jpg" style="width:100%">
    <div class="text">Caption Three</div>
  </div>

  <!-- Next and previous buttons -->
  <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
  <a class="next" onclick="plusSlides(1)">&#10095;</a>
</div>
<br>

<!-- The dots/circles -->
<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>

Firstly, we need a container to hold our slides, and we will be styling it in our next step. We will also add a transition element to style how our slides fades to the next one.
Manually, we will add a Next and a Previous button to allow users to scroll through the slides.
Adding some finishing touches are some dots, displayed just beneath our slides which we will use as number guides to allow users to know which slide they are on. Bingo, Next Step

      2. CSS : Styling our slide

* {box-sizing:border-box}

/* Slideshow container */
.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;}

As defined earlier, we need a container to hold our slides. our maximum width is set to 1000px, if you prefer it occupying the whole width, replace with 100%. With our max-width , although we have not predefined a width size but indirectly we have, it will take any space you provide but will not exceed the length defined. our position is relative to allow uniformity of all our slides'

/* Hide the images by default */
.mySlides {
    display: none;}

Here we are, our display is set to none. This is to prevent slides that are not active from popping up on the page. It automatically hides our images by default.

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

In this section, we just styled our Next and Previous buttons, positioning it as we prefer. the absolute position makes it appear on top of our slides so we will be able to see it and control our slides.

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;}

We can't just put all in one spot, how can we identify which is which, and it's not ok if the current slide is our first. So We just positioned the next button to the right since our slides will be from right to left.

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

Let's style our buttons, very simple -if you hover on it, it turns black to identify itself.
/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;}

Although we can just add our slides and leave it as it is but professionally, let's add a text to make the visitor know what you slide is speaking.

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;}

A little idea just drop. Our Indicators below can't do all the job, we are introducing number text to show the slide the user is on.

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

Our dot indicators, just another style below your slide container. It switches as a new slide shows.

.active, .dot:hover {
  background-color: #717171;}

A little touch, when active or hovered on.

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

Too raw is just bad. We just added an fade animation scene above suitable to work in all browsers.

      3. Javascript : Controlling our slide

var slideIndex = 1;
showSlides(slideIndex);

-- Setting our SlideIndex makes our first image image on the slide appears first--

// Next/previous controlsfunction plusSlides(n) {
  showSlides(slideIndex += n);
}

-- Controlling our Next and  Previous buttons with the function plusSlides in  n . The next code ..... += n moves to next slide as defined  in the function--

// Thumbnail image controlsfunction currentSlide(n) {
  showSlides(slideIndex = n);
}

The function above just controls our images, making it appear as it is.

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

Calling our HTML and CSS elements as we defined.

IN ACTION BELOW

Click here

var slideIndex = 0;
showSlides();

function showSlides() {
    var i;
    var slides = document.getElementsByClassName("mySlides");
    for (i = 0; i < slides.length; i++) {
        slides[i].style.display = "none"; 
    }
    slideIndex++;
    if (slideIndex > slides.length) {slideIndex = 1} 
    slides[slideIndex-1].style.display = "block"; 
    setTimeout(showSlides, 3000); // Change image every 3 seconds}

In the above script, we just made some small changes by setting our SlideIndex to 0, because this time, we do not need our slide to start from 1 or 2. We also added a timeout session to control auto scroll. Keep this very small enough.

IN ACTION BELOW

Click here