More actions
(for Template:Carousel) |
m (added shorthand "images" parameter - just list the images separated by semicolons) |
||
| 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. | |||
* Cannot use pipes ("|"), meaning this option does not support captions or setting individual widths for each item. | |||
<pre style="overflow:auto;"> | |||
{{Carousel | |||
|width=300 | |||
|images=image 1.png;image 2.png | |||
}} | }} | ||
</pre> | </pre> | ||
| Line 31: | Line 41: | ||
:<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== | ||
Using list (image widths can vary and images have captions) | |||
{{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> | ||
<div class="jcarousel-item">[[File:BlazBlue Chrono Phantasma Ragna the Bloodedge Main.png| | <div class="jcarousel-item">[[File:BlazBlue Chrono Phantasma Ragna the Bloodedge Main.png|200x200px|center|thumb|BBCP]]</div> | ||
}} | }} | ||
Using <code>images</code> parameter instead of list (all images are the same size and cannot have captions): | |||
{{Carousel | |||
|width=300 | |||
|images=BlazBlue Central Fiction Logo.png;BlazBlue Calamity Trigger Logo.png | |||
}} | |||
<includeonly>[[Category:Graphic templates]]</includeonly> | <includeonly>[[Category:Graphic templates]]</includeonly> | ||
Revision as of 17:50, 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.
- Cannot use pipes ("|"), meaning this option does not support captions or setting individual widths for each item.
{{Carousel
|width=300
|images=image 1.png;image 2.png
}}
Parameter list
widthWidth of the slider. e.g.450if the series of images are 450px widealignTo 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.listFor every slide, start a new line and put<div class="jcarousel-item">[[File:exampleimage.jpg]]</div>, substituting exampleimage.jpg with the image you desire.imagesShorthand using "images" instead of "list" parameter.
Examples
Using list (image widths can vary and images have captions)
Using images parameter instead of list (all images are the same size and cannot have captions):
