More actions
(for Template:Carousel) |
m (fixed typo) |
||
(2 intermediate revisions by the same user not shown) | |||
Line 5: | Line 5: | ||
== Usage == | == Usage == | ||
<pre style="overflow:auto;"> | <pre style="overflow:auto;"> | ||
{{Carousel | {{Carousel | ||
Line 12: | Line 13: | ||
<div class="jcarousel-item">[[File:exampleimage1.jpg]]</div> | <div class="jcarousel-item">[[File:exampleimage1.jpg]]</div> | ||
<div class="jcarousel-item">[[File:exampleimage2.jpg]]</div> | <div class="jcarousel-item">[[File:exampleimage2.jpg]]</div> | ||
... | ... | ||
}} | }} | ||
Line 21: | Line 21: | ||
|list= | |list= | ||
{{p|[[File:exampleimage1.jpg|thumb|300px]]}} | {{p|[[File:exampleimage1.jpg|thumb|300px]]}} | ||
{{p|[[File:exampleimage2 | {{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> | </pre> | ||
Line 31: | Line 43: | ||
:<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>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>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 | {{Carousel | ||
|width = | |width = 300 | ||
|align = | |align = | ||
|list= | |list= | ||
<div class="jcarousel-item">[[File:BlazBlue Cross Tag Battle Ragna the Bloodedge Main.png| | <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| | <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> | <includeonly>[[Category:Graphic templates]]</includeonly> |
Latest revision as of 18:28, 8 October 2021
This is a documentation subpage for Template:Carousel. It contains usage information, categories, interlanguage links and other content that is not part of the original template page. |
This template is used for a slider made out of thumbnails.
A single list item also has the shortcut template Template:p.
Usage
{{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]]}} ... }}
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
{{Carousel |width=300 |images= image 1.png;300px;Image caption image 2.png;This is an image caption }}
Parameter list
width
Width of the slider. e.g.450
if the series of images are 450px widealign
To have it float to the right, usefloatright
. To have it float to the left, usefloatleft
. To have it centered, usecenter
. To have it without any, usenull
.list
For every slide, start a new line and put<div class="jcarousel-item">[[File:exampleimage.jpg]]</div>
, substituting exampleimage.jpg with the image you desire.images
Shorthand using "images" instead of "list" parameter.
Examples
Using list: {{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> }} |
|
Using {{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 }} |