Image Slideshow Gallery

learn how to create an image slideshow gallery using Html, CSS, JavaScript with the complete source code in this article.

0 650
Image Slideshow Gallery

Table of content

About the Image Slideshow Gallery

Image slide show gallery can be used in your project to create a very beautiful image slide for displaying many images. This slide includes the previous and next buttons for changing images and also shows all the images in the gallery below the main image with the captions. The image slideshow gallery was created with html, CSS, JavaScript. Steps listed below.

Features of the Image Slideshow Gallery

  • Good interface
  • Next and previous buttons
  • Image gallery
  • Includes caption for each image
  • Cursor pointer
  • Includes number
  • Very responsive design

Script file Includes    

  • HTML
  • CSS
  • JavaScript
  • images

Step by step on how to create the Image Slideshow Gallery

  1. Create a new folder to store all the files we will create and save.
  2. Go to your code/ text editor.
  3. Create a file named index.html and save in the folder we first created
  4. Copy and paste the code below into the index.html Code below:

INDEX.HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Image Slideshow Gallery</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    
    <h2 style="text-align:center">Image Slideshow Gallery</h2>
    
    <div class="container">

        
    <div class="caption-Cont">
        <p id="caption"></p>
    </div>

  <div class="slide">
    <div class="position">1 / 6</div>
    <img src="img1.jpg" style="width:100%">
  </div>

  <div class="slide">
    <div class="position">2 / 6</div>
    <img src="img2.jpeg" style="width:100%">
  </div>

  <div class="slide">
    <div class="position">3 / 6</div>
    <img src="img3.jpeg" style="width:100%">
  </div>
    
  <div class="slide">
    <div class="position">4 / 6</div>
    <img src="img4.jpeg" style="width:100%">
  </div>

  <div class="slide">
    <div class="position">5 / 6</div>
    <img src="img5.jpeg" style="width:100%">
  </div>
    
  <div class="slide">
    <div class="position">6 / 6</div>
    <img src="img6.jpeg" style="width:100%">
  </div>
    
  <a class="prev" onclick="plusSlides(-1)">❮</a>
  <a class="next" onclick="plusSlides(1)">❯</a>

  <div class="row">
    <div class="column">
      <img class="image" src="img1.jpg" style="width:100%" onclick="currentSlide(1)" alt="Work">
    </div>
    <div class="column">
      <img class="image" src="img2.jpeg" style="width:100%" onclick="currentSlide(2)" alt="Bitcoin">
    </div>
    <div class="column">
      <img class="image" src="img3.jpeg" style="width:100%" onclick="currentSlide(3)" alt="Nature">
    </div>
    <div class="column">
      <img class="image" src="img4.jpeg" style="width:100%" onclick="currentSlide(4)" alt="Books">
    </div>
    <div class="column">
      <img class="image" src="img5.jpeg" style="width:100%" onclick="currentSlide(5)" alt="Bitcoin and Gold">
    </div>    
    <div class="column">
      <img class="image" src="img6.jpeg" style="width:100%" onclick="currentSlide(6)" alt="forest">
    </div>
  </div>
</div> 

<script src="script.js"></script>
</body>
</html>
  • Then Create another file called style.css in the same folder we created.

STYLE.CSS

body {  
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.container {
  position: relative;
  width: 500px;
  height: 500px;
}
img {
  vertical-align: middle;
}

.slide {
  display: none;
}

.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 40%;
  width: auto;
  padding: 16px;
  margin-top: -50px;
  color: rgb(228, 179, 179);
  font-weight: bold;
  font-size: 20px;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;
}

.caption-Cont {
  text-align: center;
  background-color: rgba(0, 0, 0, 0.87);
  padding: 2px 16px;
  color: white;
}
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

.prev:hover,
.next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

/* position the numbers*/
.position {
    position: absolute;
    font-size: 15px;
    padding: 10px;
    color: #f2f2f2ec;
    top: 0;
}
.image {
    opacity: 0.6; 
}

.active,
.image:hover {
  opacity: 1;
  cursor: pointer;
}
.row:after {
  content: "";
  display: table;
  clear: both;
}
.column {
  float: left;
  width: 16.66%;
}
  • Create another file called script.js in the same folder with others. JavaScript gives it the sliding feature.

SCRIPT.JS

var slidenum = 1;  showSlides(slidenum);
    
    function plusSlides(a) {
      showSlides(slidenum += a);
    }
    
    function currentSlide(a) {
      showSlides(slidenum = a);
    }
    function showSlides(a) {
      var z;
      var slides = document.getElementsByClassName("slide");
      var dots = document.getElementsByClassName("image");
      var captionText = document.getElementById("caption");
      if (a > slides.length) {slidenum = 1}
      if (a < 1) {slidenum = slides.length}
      for (z = 0; z < slides.length; z++) {
          slides[z].style.display = "none";
      }
      for (z = 0; z < dots.length; z++) {
          dots[z].className = dots[z].className.replace(" active", "");
      }
      slides[slidenum-1].style.display = "block";
      dots[slidenum-1].className += " active";
      captionText.innerHTML = dots[slidenum-1].alt;
    }
  1. Open your browser and run the html file. The output will look like the image below

How to run the downloaded source code

You can download the source code if you like. The zipped source code is attached to this article below; it can be downloaded from there.

  1. Go to the attached zipped file which is below.
  2. Then click on the attached zipped file to download it.
  3. Go to downloads folder on your computer and unzip/ extract it.
  4. Open the unzipped folder and double click on the index.html file to open it in your browser.
  5. You can open the code with your code/ text editor and modify.

Screenshots

Image Slideshow Gallery

Image Slideshow Gallery

Tags: