How to Create Image Sliders in JavaScript

How to Work with Literals and Loops in JavaScript

Want to create your own image slider using JavaScript, HTML and CSS. Then I’m sure that you have landed on the right page. Through this blog you’ll be able to build an awesome Image slider. So, let’s begin our dissertation.

What is an Image Slider?

The very first thing we all should know that Image Sliders are related to image gallery. Through this blog you will learn how to create a gallery or image slider which is an essential topic which one should understand in depth to be a JavaScript Master. We will create a simple image slider using HTML, CSS and JavaScript only. We are not going to use other external plugins to create this image slider. A slideshow can also be called Carousel. We use a slideshow to cycle between the Elements.

Creating Image Slider:

  • Firstly, create the folder named “Images” in the project path and put there all the images we are going to use while making the slideshow. One thing that should be kept in mind  is that all the   images should be in same size (width*height). If this is not done the Slider will misbehave while the slideshow.
  • Add the following code in the Body of your HTML document.
<!-- 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>

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

⦁   It’s time to add the following CSS in your document inside <style>…</style> in head or create an external .css file and link to your document.
* {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;
     }
   /* 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}
   }

⦁   Add JavaScript to your slideshow to make it works. Copy and paste the following JavaScript code in between <script>…</script> tag or create an external JavaScript file with .js extension and add back to your page.

Note: Always link up all the JavaScript files just above the closing </body> tag.

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

The above is the example of the Image Slider created using JavaScript. I know there are many places to improve but I hope this will help in understanding what an Image Slider is? I am learning new things daily from my JavaScript course and for the same we need to practice a lot. So, practice hard and write better code!

To ensure your success in web designing or development, enrolling in an ideal training institute is highly suggested. Honestly an institute builds the structure of any successful career. One such institute is Web Development Institute which is a leading training center of web designing and development in Delhi. You can check our web design and development courses to explore in detail. 

Leave a Reply

You must be logged in to post a comment.

Copy link