Difference between revisions of "Image slider"
From Organic Design wiki
m (new butterflies) |
m |
||
| Line 22: | Line 22: | ||
<div class="image-slider"> | <div class="image-slider"> | ||
| − | [[File:Butterfly3.jpg| | + | [[File:Butterfly3.jpg|500px]] |
| − | [[File: | + | [[File:Orange and yellow butterfly 1.jpg|500px]] |
| − | [[File: | + | [[File:Butterfly1.jpg|500px]] |
| − | [[File: | + | [[File:Blue butterfly on chia.jpg|500px]] |
| − | [[File:2015 red butterfly 2.jpg| | + | [[File:2015 red butterfly 2.jpg|500px]] |
</div> | </div> | ||
| − | [[File:Butterfly3.jpg|100px]][[File: | + | [[File:Butterfly3.jpg|100px]][[File:Orange and yellow butterfly 1.jpg|100px]][[File:Butterfly1.jpg|100px]][[File:Blue butterfly on chia.jpg|100px]][[File:2015 red butterfly 2.jpg|100px]] |
Revision as of 12:57, 31 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 into a slider like the one below. You can use your own CSS rules to give the next/prev links a nicer style and make a frame around the image. The images should all be the same size for it to work properly. The code is in our Subversion repository here.
In the wiki you can use image links as follows:
|
Or in a pure HTML environment you just use image links like this, and add the code into the head element of the HTML (of course this assumes that the images are in the same location as the HTML):
Here's a working example:
