"
Team:Imperial College/Templates/Slideshow
From 2013.igem.org
This is a template for a slideshow. It's still under construction, but when finished there will be instructions on how to use it here.
How to use
You need this code once on your page, even if you want several slideshows:
{{:Team:Imperial_College/Templates/Slideshow}}
Now for each slideshow, insert the following code and modify as required:
<html>
<div class="jcarousel-container" style="">
<div class="jcarousel" style="">
<div class="jcarousel-slides" style="">
<div class="jcarousel-slide" style="">
{{{pic1}}}
</div>
<div class="jcarousel-slide" style="">
{{{pic2}}}
</div>
<div class="jcarousel-slide" style="">
{{{pic3}}}
</div>
</div>
</div>
<div class="jcarousel-prev" style="">
<img src="https://static.igem.org/mediawiki/2013/b/b2/Arrow_left.png" alt="prev" width="48" style="">
</div>
<div class="jcarousel-next" style="">
<img src="https://static.igem.org/mediawiki/2013/4/4a/Arrow_right.png" alt="next" width="48" style="">
</div>
</div>
</div>
</html>
Reference
- jcarousel-container: This is an invisible box which includes the whole slideshow (red border in the example)
- jcarousel: This is the actual slideshow-container (blue border in the example).
- jcarousel-slides: This is a massively wide box containing the slides. It's best not to modify this.
- jcarousel-slide: Copy+paste these ones to add more slides.
- jcarousel-prev & -next: Containers for the "Next" and "Prev" buttons.
If you wanted a wider slideshow: Add the 'width' property to the style in jcarousel-container and in each jcarousel-slide. E.g. style="width:800px".
If you wanted a taller slideshow: Add the 'height' property to the style in jcarousel and in each jcarousel-slide. E.g. style="height:400px". Then add the 'top' property to the 'style' in jcarousel-prev and -next. E.g. style="top:196px". As a rule of thumb, the number for 'top' should be half the height you gave to jcarousel, minus 4 (which is due to 20px padding from top and 48px total icon height).
Example
