Template:ShroomSlideshow: Difference between revisions
m (Text replacement - "</includeonly>↵<noinclude>" to "</includeonly><noinclude>") |
mNo edit summary |
||
| Line 1: | Line 1: | ||
<includeonly> | <includeonly><div class="shroomSlideshow" data-slideidx=1> | ||
<div class="shroomSlideshow" data-slideidx=1> | |||
<div class="shroomSlideshowHeader"> | <div class="shroomSlideshowHeader"> | ||
<div class="shroomSlideshowLeft">❮</div> | <div class="shroomSlideshowLeft">❮</div> | ||
| Line 16: | Line 15: | ||
|{{{numSlides}}} | |{{{numSlides}}} | ||
|<div class="shroomSlideshowSlide">{{{ {{#var: $varname }} |}}}</div> | |<div class="shroomSlideshowSlide">{{{ {{#var: $varname }} |}}}</div> | ||
}}</div> | }}</div></includeonly><noinclude> | ||
</includeonly><noinclude> | |||
=== How To Use === | === How To Use === | ||
<pre> | <pre> | ||
| Line 98: | Line 95: | ||
</div> | </div> | ||
</div> | </div> | ||
</noinclude> | |||
[[Category:The 'Shroom templates]]</noinclude> | |||
Latest revision as of 18:09, March 20, 2024
How To Use
Syntax:
{{ShroomSlideshow|numSlides=(number of slides)|rowTabs=(number of tabs per row)|Content}}
This class functions similarly to a table, except it performs a slideshow/carousel for each entry. The parameters are as follows:
sliderName - A name for the slider. Required, unless you happen to only have one slideshow on the entire page (not recommended).
rowTabs = The number of buttons you want per row. The max is 12 and the default is 8.
numSlides - The number of slides you wish to have. This is required.
Content - The content you want to feature. It is assumed that the first thing you put for this parameter is the first slide, then you can separate each slide with "|". If you have more slides than what you specify, they will be blank.
The navigator tabs will be styled according to whatever team they're on. For example, here is a slideshow in Fake News.
<div class="fn">
<div class="shroomsection">
{{ShroomSlideshow
|numSlides=6
|rowTabs=6
|sliderName=demo1
|Slide 1
|Slide 2
|Slide 3
|Slide 4
|Slide 5
|Slide 6
}}
</div>
</div>
Renders as:
1
2
3
4
5
6
The nice thing about this template is unlike "gallery mode="slideshow"", you can put whatever you want, including some more complex things.
Here's one showcasing text and images. I've specified 4 slides, but have only provided content for 3 of them, so the last slide will feature nothing instead of breaking.
<div class="fs">
<div class="shroomsection">
{{ShroomSlideshow
|sliderName=demo2
|numSlides=4
|<h3>This is a header!</h3>
And we have some text here too! We could talk all day about this sorta stuff.
|[[File:ShroomBanner2017.png|frame|center|Here's an image!]]
|[[File:ShroomPoochy.png|thumb|This is a caption.]] This slide features some image and a text!
}}
</div>
</div>
