Skip to content

Canvas Image Slider. A simple fluid image slider using a <canvas> or <div> node.

Notifications You must be signed in to change notification settings

christiaan/canvas-slider

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

26 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Canvas Image Slider

A simple fluid image slider using a <canvas> or <div> node.

To create a slider simply create a structure like this.

<canvas class="slider" width="640" height="400">
  <img src="http://lorempixel.com/640/400"/>
  <img src="http://lorempixel.com/g/600/400"/>
  <img src="http://lorempixel.com/640/150"/>
  <img src="http://lorempixel.com/500/400"/>
</canvas>

Or this

<div class="slider" style="width: 400px; height: 500px">
  <img src="http://lorempixel.com/400/500"/>
  <img src="http://lorempixel.com/g/360/500"/>
  <img src="http://lorempixel.com/150/150"/>
  <img src="http://lorempixel.com/350/350"/>
</div>

Development

The only requirement is to have either nodejs or iojs installed.

Start with npm install to install all dependencies.

Then run npm start and go to localhost:3030

About

Canvas Image Slider. A simple fluid image slider using a <canvas> or <div> node.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published