Template:Carousel/doc: Difference between revisions

Template page
(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>
<div class="jcarousel-item">[[File:exampleimage3.jpg]]</div>
...
...
}}
}}
Line 21: Line 21:
|list=
|list=
{{p|[[File:exampleimage1.jpg|thumb|300px]]}}
{{p|[[File:exampleimage1.jpg|thumb|300px]]}}
{{p|[[File:exampleimage2.jpg|thumb|300px]]}}
{{p|[[File:exampleimage2.jpg]]}}
{{p|[[File:exampleimage3.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.


==Example==
==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 = 500
|width = 300
|align =  
|align =  
|list=
|list=
<div class="jcarousel-item">[[File:BlazBlue Cross Tag Battle Ragna the Bloodedge Main.png|500x500px]]</div>
<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|500x500px]]</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|500x500px]]</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 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 wide
align To have it float to the right, use floatright. To have it float to the left, use floatleft. To have it centered, use center. To have it without any, use null.
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>
}}

BBTAG
BBCF
BBCP

Icon banner arrow left.png Icon banner arrow right.png

Using images parameter instead of list:

{{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
}}

BBTAG
BBCF
BBCP

Icon banner arrow left.png Icon banner arrow right.png