View source for Template:Carousel/doc

{{Documentation subpage}}
This template is used for a slider made out of thumbnails.

A single list item also has the shortcut template [[Template:p]].

== Usage ==

<pre style="overflow:auto;">
{{Carousel
|width = 
|align = 
|list=
<div class="jcarousel-item">[[File:exampleimage1.jpg]]</div>
<div class="jcarousel-item">[[File:exampleimage2.jpg]]</div>
...
}}

{{Carousel
|width = 
|align = 
|list=
{{p|[[File:exampleimage1.jpg|thumb|300px]]}}
{{p|[[File:exampleimage2.jpg]]}}
...
}}
</pre>


Shorthand using "images" parameter instead of "list"
* List images to have them automatically sized to the given "width" of the carousel. List each item on a separate line.
* Split width, captions, etc. by semicolons
<pre style="overflow:auto;">
{{Carousel
|width=300
|images=
image 1.png;300px;Image caption
image 2.png;This is an image caption
}}
</pre>

== Parameter list ==
:<code>width</code> Width of the slider. e.g. <code>450</code> if the series of images are 450px wide
:<code>align</code> To have it float to the right, use <code>floatright</code>. To have it float to the left, use <code>floatleft</code>. To have it centered, use <code>center</code>. To have it without any, use <code>null</code>. 
:<code>list</code> For every slide, start a new line and put <code><nowiki><div class="jcarousel-item">[[File:exampleimage.jpg]]</div></nowiki></code>, substituting exampleimage.jpg with the image you desire.
:<code>images</code> Shorthand using "images" instead of "list" parameter.

==Examples==
<table><tr>
<td>
Using list:
<pre>
{{Carousel
|width = 300
|align = 
|list=
<div class="jcarousel-item">[[File:BlazBlue Cross Tag Battle Ragna the Bloodedge Main.png|300x300px|center|thumb|BBTAG]]</div>
<div class="jcarousel-item">[[File:BlazBlue Central Fiction Ragna the Bloodedge Main.png|150x150px|center|thumb|BBCF]]</div>
<div class="jcarousel-item">[[File:BlazBlue Chrono Phantasma Ragna the Bloodedge Main.png|200x200px|center|thumb|BBCP]]</div>
}}
</pre>
</td>
<td>
{{Carousel
|width = 300
|align = 
|list=
<div class="jcarousel-item">[[File:BlazBlue Cross Tag Battle Ragna the Bloodedge Main.png|300x300px|center|thumb|BBTAG]]</div>
<div class="jcarousel-item">[[File:BlazBlue Central Fiction Ragna the Bloodedge Main.png|150x150px|center|thumb|BBCF]]</div>
{{p|[[File:BlazBlue Chrono Phantasma Ragna the Bloodedge Main.png|200x200px|center|thumb|BBCP]]}}
}}
</td>
</tr><tr>
<td>
Using <code>images</code> parameter instead of list:
<pre>
{{Carousel
|width=300
|images=
File:BlazBlue Cross Tag Battle Ragna the Bloodedge Main.png;300px;BBTAG
File:BlazBlue Central Fiction Ragna the Bloodedge Main.png;150px;BBCF
File:BlazBlue Chrono Phantasma Ragna the Bloodedge Main.png;200px;BBCP
}}
</pre>
</td><td>
{{Carousel
|width=300
|images=
File:BlazBlue Cross Tag Battle Ragna the Bloodedge Main.png;300px;BBTAG
File:BlazBlue Central Fiction Ragna the Bloodedge Main.png;150px;BBCF
File:BlazBlue Chrono Phantasma Ragna the Bloodedge Main.png;200px;BBCP
}}
</td></tr>
</table>

<includeonly>[[Category:Graphic templates]]</includeonly>