/CSSslidy

An auto-generated responsive CSS image slider

Primary LanguageJavaScript

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