How to create a jQuery slideshow

A slideshow is a presentation format that consists of a series of slides displayed sequentially. Each slide can hold any content that includes images, texts, graphs, etc. A slideshow is used for presentations.

A slideshow can be created by combining HTML for structure, CSS (or CSS libraries) for styling, and any programming language to handle the functionality. This Answer explains how to create a slideshow using jQuery in combination with HTML and CSS.

jQuery slideshow

Creating a slideshow with jQuery is not a difficult task. To create one, follow these steps:

  1. Include the jQuery library in the document: There are two ways to include the jQuery library in a project;

    • Downloading the jQuery library and hosting it locally.
    • Using a content delivery network (CDN) to include it.

The CDN method is commonly used because it’s fast and doesn’t add to the file size.

Here’s an example of including jQuery using CDN:

<html>
 <head>
   <!--jQuery included using CDN-->
     <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
 </head>
 <body>
  
 </body>
</html>
  1. Set up the slide HTML structure: Do so according to your preferences. Generally, there should be a parent containerA parent container refers to an element that contains other HTML elements within itself. holding all the slides; each slide will be contained in a separate container. Here’s an example:
<html>
 <head>
   <!--jQuery included using CDN-->
     <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
 </head>
 <body>
   <h1>jQuery Slide Show</h1>
   <div class="slides-container">
     <!--Slide 1-->
     <div class="slide">
       <!--Slide content-->
       <img src="https://www.educative.io/api/edpresso/shot/6290565820579840/image/4750930661343232" alt="image1" width="500" height="500">
     </div>
     <!--Slide 2-->
     <div class="slide">
       <!--Slide content-->
       <img src="https://www.educative.io/api/edpresso/shot/6290565820579840/image/4680713398648832" alt="image2" width="500" height="500">
     </div>
     <!--Slide 3-->
     <div class="slide">
       <!--Slide content-->
       <img src="https://www.educative.io/api/edpresso/shot/6290565820579840/image/4955241567748096" alt="image3" width="500" height="500">
     </div>
     <!--Slide 4-->
     <div class="slide">
       <!--Slide content-->
       <img src="https://www.educative.io/api/edpresso/shot/6290565820579840/image/4787308698796032" alt="image4" width="500" height="500">
     </div>
     <!--Slide 5-->
     <div class="slide">
       <!--Slide content-->
       <img src="https://www.educative.io/api/edpresso/shot/6290565820579840/image/5079526311460864" alt="image5" width="500" height="500">
     </div>
   
   </div>
  
 </body>
</html>
  1. Add CSS styles: Styles control appearance. Write styles that meet your needs.

Note: Set the slides display to none; it helps when writing the slideshow functionality.

Here’s a basic style to start with:

 h1{
   text-align: center;
 }
 .slides-container{
    position: relative;
    width: 100%;
    height: 500px;
    display: block;
    margin-left: 15%;
    overflow: hidden;
  }
  .slide{
    position: absolute;
    width: 100%;
    height: 100%;
    display: none;
  }
  1. Write the jQuery scripts: Next, write the jQuery script that handles the slideshow functionality. This script will show and hide the slides at specific intervals to create the slideshow effect. An example is given below:

Code explanation

  • Line 6: We target all elements with the slide class.

  • Line 7: We assign 0 to the slideIndex variable.

  • Line 10: We show the first slide. We access the first element with the slide class and show it using the .show() jQuery method.

  • Line 13: We use the setInterval() method to call a function at specified intervals (in milliseconds).

  • Line 15: We hide the current slide. We access the element and hide it using the .fadeOut() jQuery method.

  • Line 18: We increment the value of slideIndex and wrap it back to 0 when it reaches the maximum value.

  • Line 23: We show the next slide after two seconds.

That’s it! We now have a basic jQuery slideshow. Feel free to adjust the styles, add animations, or include additional functionality to suit your specific requirements.

Free Resources

Copyright ©2025 Educative, Inc. All rights reserved