#CSSslidy
An auto-generated, responsive CSS image slider
- Ensure that all the images you wish to use are exactly the same size.
- Create an element with an
idofslidy-containerand an element with anidofslidycontaining your images. Optionally, include caption information.
<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>(The id values may be changed and customised in the script)
- Add
cssslidy.jsto the bottom of the page. - Call
cssSlidy():
<script> cssSlidy(); </script>To customize your slidy, pass an options object to the cssSlidy() call:
<script>
cssSlidy({
timeOnSlide: 5,
timeBetweenSlides: .5,
slidyContainerSelector: 'custom-container',
slidySelector: 'custom-slidy',
captionSource: 'data-caption',
captionBackground: 'rgba(0,0,0,0.9)',
captionColor: '#ff0',
captionFont: 'Brittanic Bold, Hevetica, sans-serif',
captionPosition: 'top',
captionAppear: 'perm',
captionSize: '16px',
captionPadding: '1em',
fallbackFunction: function(){ alert("Oh noes! You can't animate!"); },
cssAnimationName: 'custom-animation'
});
</script>| Option | Type | Default Value | Description |
|---|---|---|---|
timeOnSlide |
number | 3 |
Amount of time (in seconds) per slide |
timeBetweenSlides |
number | 1 |
Amount of time (in seconds) per transition |
slidyContainerSelector |
string | '#slidy-container' |
Define the ID used for the slidy container element |
slidySelector |
string | '#slidy' |
Define the ID used for the slidy element |
slidyDirection |
string | 'left' |
Define the slider direction of travel |
captionSource |
string | 'data-caption' |
Attribute value to use for caption text for the image. Can also be set to 'alt' or 'none' |
captionBackground |
string | 'rgba(0,0,0,0.3)' |
Background color for the caption. Takes any valid CSS color value |
captionFont |
string | 'Avenir, Avenir Next, Droid Sans, DroidSansRegular, Corbel, Tahoma, Geneva, sans-serif' |
Font-stack for the caption |
captionColor |
string | '#fff' |
Caption color: any valid CSS color value |
captionPosition |
string | 'bottom' |
Location of the image caption. Can also be set to 'top' |
captionAppear |
string | 'slide' |
How the caption appears on mouseover. Can also be set to 'perm' (permanent) or 'fade' |
captionSize |
string | '1.6rem' |
Font-size of the caption, in any valid CSS length unit |
captionPadding |
string | '.6rem' |
Padding within the caption. Takes any valid CSS length value |
fallbackFunction |
function | function(){} |
Function called if CSS Animation is not supported |
cssAnimationName |
string | 'slidy' |
Name of CSS animation |
Any added manipulation of the caption font-size – such as inside @media breakpoints added inside your CSS – will require important to overwrite the appearence rules generated by the script. For example:
@media screen and (max-width: 600px) { #slidy-container figcaption { font-size: 1rem !important; } }