Fork me on GitHub

CSSslidy

Photograph of orange rock formations in Antelope Canyon, Arizona by eliyasj Broad vista photograph of Canyonlands National Park, Arizona, taken by Charles Martin Photograph looking through Mesa Arch at a sunrise in Moab, Utah, taken by Krasimir Ganchev Photograph of wave rock formations in Canyonlands National Park, Arizona, taken by Vanessa Kay

No frameworks. No plugins. Just CSS and 3.8K of vanilla JavaScript.

  1. Ensure that all the images you wish to use are exactly the same size.
  2. Create an element with an id of slidy-container and an element with an id of slidy containing your images. The images may have optional caption text as the value of their alt or data-caption attributes. 
    <div id="slidy-container">
  <figure id="slidy">
    <img src="antelope-canyon.jpg" alt data-caption="Antelope Canyon, Arizona">
    <img src="canyonlands.jpg" alt data-caption="Canyonlands Vista, Arizona">
    <img src="mesa-arch.jpg" alt data-caption="Mesa Arch sunrise, Moab, Utah">
    <img src="wave-canyon.jpg" alt data-caption="Canyonlands, Arizona">
  </figure>
</div>
  3. Add cssslidy.js to the bottom of the page.
  4. Call cssSlidy(): 
    <script> cssSlidy(); </script>

Available Options:

timeOnSlide: Amount of time (in seconds) per slide

timeBetweenSlides: Amount of time (in seconds) per transition

slidyDirection: Direction of slider movement: left by default, but may be set to right

captionSource: Each image may display caption text. The caption content is drawn from the value of a data-caption attribute by default for accessibility, but alt may also be used, or none. Caption content should be short sentences.

captionBackground: background color of the captions.

captionColor: color of caption text.

captionFont: the font stack for the captions.

captionAppear: how the caption appears. Permanent presentation of the caption text is the default option, the text can also fade or slide into place on mouseover.

captionPosition: the caption can appear at the bottom of each image, or at the top. (bottom is the default).

captionSize & captionPadding: the font-size and padding of the caption text, respectively. Can be measured in any units you wish.

slidyContainerSelector: Define the ID used for the slidy container element.

slidySelector: Define the ID used for the slidy element.

fallbackFunction: Function called if CSS Animation is not supported.

cssAnimationName: Name of CSS animation.

See documentation for use of options.

Photographs by Charles Martin, Krasimir Ganchev, Vanessa Kay and eliyasj, licensed under Creative Commons.