Slideshow Code Generator
Simplest CSS Slideshow
Overview
Why
Creating slideshows with images is a popular feature on many websites. Calculating the keyframe values for a smooth, evenly playing slideshow can be tricky.
What
This tool quickly and easily allows you to set your slideshow preference and generate the code to copy and paste into your project.
The slideshow will be built using only HTML and CSS.
Who
This code is for people relatively familiar with CSS and HTML.
Setup
The HTML
We have a div that serves as the frame and within this frame we have our image elements.
The CSS
The frame is given dimensions and its border and background color are set.
The key CSS rules here are the positioning values for both “frame” and "slides" and the opacity value for “slides”. These rules give the slideshow its functionality.
Absolute positioning of "slides" stacks the images atop one another and the opacity value gets animated to reveal and hide the images. In order to keep the slides within the frame we have to set position value of “frame” to relative.
With this basic structure in place we are ready to start animating!
How It All Works
The Preview helps you test different Fade and Hold time combinations.
To use it, enter/change the Fade and Hold times then hit the "Preview" button and the Preview will adjust accordingly.
Once your desired Fade and Hold times are in place, enter the Number of Images that are in your slideshow and hit the "Get Code" button. Your customized code will display below for copying and pasting pleasure.
Cheers!
The Slideshow Code Generator
