CSSslidy

#CSSslidy

An auto-generated, responsive CSS image slider

Use:

• Ensure that all the images you wish to use are exactly the same size.
• Create an element with an id of slidy-container and an element with an id of slidy containing 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.js to the bottom of the page.
• Call cssSlidy():

<script> cssSlidy(); </script>

Customize:

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>

Available options:

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

Note:

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; } }