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>
cssslidy.js
to the bottom of the page.
cssSlidy()
:
<script> cssSlidy(); </script>
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.
Photographs by Charles Martin, Krasimir Ganchev, Vanessa Kay and eliyasj, licensed under Creative Commons.