Skip to content

nanaowusunyamekye/CSSslidy

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

11 Commits
 
 
 
 
 
 
 
 

Repository files navigation

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

About

An auto-generated responsive CSS image slider

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 60.4%
  • HTML 33.4%
  • CSS 6.2%