Difference between revisions of "Image slider"
From Organic Design wiki
m |
m |
||
| Line 38: | Line 38: | ||
// Restructure the content of this sliders div into a table with prev/next buttons | // Restructure the content of this sliders div into a table with prev/next buttons | ||
| − | var prev = '<a class="is-prev" href=" | + | var prev = '<a class="is-prev" href="javascript:">< prev</a>'; |
| − | var next = '<a class="is-next" href=" | + | var next = '<a class="is-next" href="javascript:">next ></a>'; |
div.html( '<table><tr><th><table><tr><td>' + prev + next + '</td></tr></table></th></tr></table>' ); | div.html( '<table><tr><th><table><tr><td>' + prev + next + '</td></tr></table></th></tr></table>' ); | ||
| − | $('.is-prev', div).click(function( | + | $('.is-prev', div).click(function() { slide($('div').has(this), -1 ); }); |
| − | $('.is-next', div).click(function( | + | $('.is-next', div).click(function() { slide($('div').has(this), 1 ); }); |
// Set the cell size to the image size and other css styles | // Set the cell size to the image size and other css styles | ||
Revision as of 23:55, 30 March 2015
Here's a simple image slider written 100% in JavaScript and jQuery. In converts any div elements of class "image-slider" containing img elements in a slider like the one below.
The code is in our Subversion repository here.
