Pure CSS Slideshow Autoplay without JavaScript

After getting a lot of feedback, today I have the plan to share with you a pure CSS slideshow autoplay without JavaScript. It comes with dot navigation support. Furthermore, it also supports the title and description text over each slider image.  You can easily customize the heading text by editing the CSS.

Another great functionality of this slider, it supports the autoplay function. That means it allows you to set whether slider slides the images automatically or not.

Every CSS only image slider have its own way of build and functionality. This slider doesn’t support thumbnail functionality but you can check out our CSS thumbnail image slider which also builds with CSS.

But It is the fully responsive carousel and supports a wide range of browsers including IE. It has multiple animation options to allow to slide the slider in a different way.

You can easily choose the version that you like. You just need to call a separate CSS file, and the HTML file is the same except the light version. The lighter version doesn’t have legend or bullets.

This slider created by Elitewares and he has done a great job. It makes the slider without touching javascript and provides all possible function which has any simple jquery slider.

The slider includes the effects left to right, a right to left, top to bottom and bottom to top. It also allows adding overlay text with animation.

The important and significant thing about this slider, it is autoplay with bullets. It means that when the slide changes the image, it will replace the status bullet automatically.

HTML Structure for Auto Slideshow

I am not going to explain you whole process but few necessary things. You will get the complete source code and demo at below. Ok now let’s have a look at the HTML.

Before I go ahead, I want to mention that the HTML bit complicated as compared to other sliders. It requires to add a few extra divs, but this is maybe because of its excellent functionality.

The slider HTML start with the main ID slider and next, it has a child div class name slides which holds each slide.

<div id="slider">
  <div class="slides">
	........	
  </div>
  <div class="switch">
    <ul>
      <li>
        <div class="on"></div>
      </li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </div>
</div>

The switch dots are placed just right below the child div slides and define with an unordered list. Each LI represent on the dot.

Next, each slider id defines with a class name slider and we need to place just under the,slides Just like below example.

<div id="slider">
  <div class="slides">
	
    <div class="slider">
      <div class="legend"></div>
      <div class="content">
        <div class="content-txt">
          <h1>Lorem ipsum dolor</h1>
          <h2>Nam ultrices pellentesque facilisis. In semper tellus mollis nisl pulvinar vitae vulputate lorem consequat. Fusce odio tortor, pretium sit amet auctor ut, ultrices vel nibh.</h2>
        </div>
      </div>
      <div class="image">
        <img src="https://img11.hostingpics.net/pics/767361311.jpg">
      </div>
    </div>

  </div>
  <div class="switch">
    <ul>
      <li>
        <div class="on"></div>
      </li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </div>
</div>

Now you can see the slider div has some child divs and HTML content etc. You can also see the div class name image which holds the image. That’s how you need to place the content, HTML, link or anything which you would like to add.

 CSS for Autoplay Slideshow

The slider ID is work by setting the width and height. It also requires position relative and overflows hidden.

#slider{
  width:100%;
  height:500px;
  position:relative;
  overflow:hidden;
}

Similar, slides class need the width and height with position relative. It also needs to add slide animation which will create using @keyframe CSS property.

.slides{
  width:400%;
  height:100%;
  position:relative;
  -webkit-animation:slide 30s infinite;
  -moz-animation:slide 30s infinite;
  animation:slide 30s infinite;
}

Each slide formula used similar to many other CSS-based sliders, and it divided the width from number sliders. Like if they have total four sliders then it’s formula will look like 100%/4 = 25%.

.slider{
  width:25%;
  height:100%;
  float:left;
  position:relative;
  z-index:1;
  overflow:hidden;
}

To make it responsive, need to set width and height to 100% for slider image and image div. The following pure CSS lines display slideshow items responsive with autoplay feature without any JavaScript.

.slide img{
  width:100%;
  height:100%;
}
.image{
  width:100%;
  height:100%;
}
.image img{
  width:100%;
  height:100%;
}

This is initially CSS require a slider to make it work but to make it look perfect and work with its function, just refer to the above demo.

You Might Be Interested In:

Ashfaq Ahmed is a freelance WordPress developer and owner of codeconvey.com. I developed modern and highly interactive websites. I always focus on improving my development and design skills.

16 thoughts on “Pure CSS Slideshow Autoplay without JavaScript”

  1. hello
    i’m new to web development and i want to know how to add another slide to this slide show … i tried several time but it didnt work .

    thank you

    • Hello! Good Morning and welcome to Codeconvey!
      Please read the article carefully, We have explained it in the second code block.
      Copy <div class=”slider”> …. </div> (with all child items)
      and paste it above the <div class=”switch”> line. (change image link and other necessary info, repeat it to add more slides.)

  2. This slider is excellent, easily configurable. Installed it on my site’s index page at tags-ship.com. Thank you!

    • Thanks for the appreciation. Keep visiting us for more excellent code snippets.

  3. Found your slider after a day’s effort of searching and trying out numerous ones. The right one I wanted. Awesome work!
    It works perfect on mobile and tablet but not on laptop (15.6inch). Not an expert, so cannot figure out how to get it work on large screen.

    Your help is appreciated. Thanks!

    Roy

  4. Great work!
    But, in order to add some other slides to the original 4, the problem is to prevent the automatic return after showing the first 4 (using @keyframe CSS property, which is a bit complicated).
    Could you please post the related css code to more than 4?
    Thanks a lot.

    • Hello Sandro Giobbio!
      If you want to add more slides in the slider do the following:
      1. Decide how many images do you have, for example, 6. Now divide this number with (full width of the container) 100/6 = 16.66.
      2. Keep the answered value as width for the “slider” class, like:

      .slider{
        width:16.66%;
      }
      

      3. Multiply the duration for each slide with the number of slides. Like, if you want to play each slide for 8 seconds then 6×8 = 48
      Now define the animation with that duration as follows:

      .slides{
         animation:slide 48s infinite;
      }
      

      Best of luck! 🙂

  5. Thank you Muhammad for your quick answer.
    I set everything as you told me (I used 8 images), but the issue that I can not solve is the automatic return to the first image after viewing 4 instead of after viewing 8.
    It is not by setting the duration for each slide that the problem is solved…
    Some other part of the css code needs to be worked on but I can’t figure out where.
    Best regards.

    • You need to define the slide keyframes for your 8 images as follows:

      @keyframes slide{
          
            0%,100%{
          margin-left:0%;
        }
        12.5%{
          margin-left:0%;
        }
            18.5%{
          margin-left:0%;
          }
        25%{
          margin-left:-100%;
        }
            31%{
          margin-left:-100%;
        }
          
        37.5%{
          margin-left:-200%;
        }
            43.5%{
          margin-left:-200%;
        }
        50%{
          margin-left: -300%;
        }
            56%{
          margin-left:-300%;
        }
        62.5%{
          margin-left:-400%;
        }
            68.5%{
          margin-left:-400%;
        }
        75%{
          margin-left:-500%;
        }
            81%{
          margin-left:-500%;
        }
        87.5%{
          margin-left:-600%;
        }
           93.5%{
          margin-left:-600%;
        } 
      }
      

      Similarly, specify the keyframes for the dots:

      @keyframes on{
        0%,100%{
          margin-left:0%;
        }
        12.5%{
          margin-left:15px;
        }
            18.5%{
          margin-left:15px;
          }
        25%{
          margin-left:30px;
        }
            31%{
          margin-left:30px;
        }
          
        37.5%{
          margin-left:45px;
        }
            43.5%{
          margin-left:45px;
        }
        50%{
          margin-left: 60px;
        }
            56%{
          margin-left: 60px;
        }
        62.5%{
          margin-left:75px;
        }
            68.5%{
          margin-left:75px;
        }
        75%{
          margin-left:90px;
        }
            81%{
          margin-left:90px;
        }
        87.5%{
          margin-left:105px;
        }
           93.5%{
          margin-left:105px;
        }
      }
      

      Update the width property for the “slides” class:

      .slides{
        width: 800% /* for 8 images */
      }
      
  6. Dear Muhammad,
    I followed your instructions step by step but there is still something wrong.
    For the moment, I would like to focus the attention only on the slide, leaving out the dots.
    In your example, the code for the eighth slide is missing (margin-left:-700%;) and it goes back after the seventh.
    So I adapted it like this:

    @keyframes slide{
    0%,100%{
    margin-left:0%;
    }

    /* 1 */
    12.5%{
    margin-left:0%;
    }
    25%{
    margin-left:0%;
    }

    /* 2 */
    25%{
    margin-left:-100%;
    }
    31%{
    margin-left:-100%;
    }

    /* 3 */
    37.5%{
    margin-left:-200%;
    }
    43.5%{
    margin-left:-200%;
    }

    /* 4 */
    50%{
    margin-left: -300%;
    }
    56%{
    margin-left:-300%;
    }

    /* 5 */
    56%{
    margin-left:-400%;
    }
    62.5%{
    margin-left:-400%;
    }

    /* 6 */
    62.5%{
    margin-left:-500%;
    }
    75%{
    margin-left:-500%;
    }

    /* 7 */
    75%{
    margin-left:-600%;
    }
    87.5%{
    margin-left:-600%;
    }

    /* 8 */
    87.5%{
    margin-left:-700%;
    }
    93.5%{
    margin-left:-700%;
    }
    }

    But even in this way the animation of the first 3 slides is fine but from the third to the end it is not smooth.
    Where am I wrong?

  7. Dear Muhammad, after many tests I found the best balance for a smooth slide of 8 images:
    12.5-18
    23.5-29
    34.5-40
    45.5-51
    56.5-62
    67.5-73
    78.5-84
    89.5-95
    Thank you for your support and for your prompt replies.

  8. How do you determine how to set the keyframes with other quantities of photos? I currently have 5 photos and have no idea how to modify this.

    • Try these ones. It works for me.

      @keyframes slide {
      0%,100% {margin-left: 0%;} /* Banner #1 */
      14.05% {margin-left: 0%;}
      20.55% {margin-left: -100%;} /* Banner #2 */
      34.55% {margin-left: -100%;}
      41.05% {margin-left: -200%;} /* Banner #3 */
      55.05% {margin-left: -200%;}
      61.55% {margin-left: -300%;} /* Banner #4 */
      75.55% {margin-left: -300%;}
      82.05% {margin-left: -400%;} /* Banner #5 */
      96.05% {margin-left: -400%;}
      }

  9. Dear Asif ,

    Excellent work . Kindly help how to show up four image at a time and move image one bye one and total number of images 8.

    • Hussain, You need to some customization to make it work with 8 images.

  10. Great slideshow. How do I make the slides clickable to a url? When I add a link to the images, nothing happens. Thanks.

Comments are closed.