Template:ImageCarousel: Difference between revisions
Jump to navigation
Jump to search
No edit summary |
DokkeFyxen (talk | contribs) mNo edit summary |
||
| (9 intermediate revisions by 2 users not shown) | |||
| Line 1: | Line 1: | ||
<includeonly> | <includeonly><div class="imagecarousel" style="text-align:center;"><span class="imagecarousel-text">{{{title|Top Text}}}</span> | ||
<div class="imagecarousel" style=" | <span id="{{{customID|imageCarousel}}}_Left" style="cursor: pointer;">[[File:Tweak_Generic_Arrow_Lesser.svg|class=invert|32px|link=]] | ||
<span id="{{{customID|imageCarousel}}}_Left" style="cursor: pointer;">[[File:Tweak_Generic_Arrow_Lesser.svg|32px|link=]] | |||
</span> | </span> | ||
<span id="{{{customID|imageCarousel}}}_Images" style="display: none;">{{{images|[[File:Base_Logic_LCD_Circle_Circuit_Node_Front_Render.png|128px]]}}}</span> | <span id="{{{customID|imageCarousel}}}_Images" style="display: none;">{{{images|[[File:Base_Logic_LCD_Circle_Circuit_Node_Front_Render.png|128px]]}}}</span> | ||
<span id="{{{customID|imageCarousel}}}_ImageDisplay"></span> | <span id="{{{customID|imageCarousel}}}_ImageDisplay"></span> | ||
<span id="{{{customID|imageCarousel}}}_Right"style="cursor: pointer;">[[File:Tweak_Generic_Arrow_Greater.svg|32px|link=]] | <span id="{{{customID|imageCarousel}}}_Right"style="cursor: pointer;">[[File:Tweak_Generic_Arrow_Greater.svg|class=invert|32px|link=]] | ||
</span> | </span> | ||
<span id="{{{customID|imageCarousel}}}_DotOff" style="display: none;">[[File:Image_Carousel_Dot_Off.png|32px|link=]]</span> | <span id="{{{customID|imageCarousel}}}_DotOff" style="display: none;">[[File:Image_Carousel_Dot_Off.png|class=invert|32px|link=]]</span> | ||
<span id="{{{customID|imageCarousel}}}_DotOn" style="display: none;">[[File:Image_Carousel_Dot_On.png|32px|link=]]</span> | <span id="{{{customID|imageCarousel}}}_DotOn" style="display: none;">[[File:Image_Carousel_Dot_On.png|class=invert|32px|link=]]</span> | ||
< | <div align="center" id="{{{customID|imageCarousel}}}_DotsRow"></div> | ||
<span id="carouselScript" data-id="{{{customID|image}}}"></span> | <span id="carouselScript" data-id="{{{customID|image}}}"></span> | ||
</div> | </div></includeonly> | ||
</includeonly> | |||
<noinclude> | <noinclude> | ||
{{ImageCarousel| | {{ImageCarousel|images=[[File:Base_Logic_LCD_Circle_Circuit_Node_Right_Render.png|128px]][[File:Base_Logic_LCD_Circle_Circuit_Node_Front_Render.png|128px]][[File:Base_Logic_LCD_Circle_Circuit_Node_Left_Render.png|128px]]|customID=carouselCircuitNode|title=Circuit Node}} | ||
{{ImageCarousel| | {{ImageCarousel|images=[[File:Arcade_Direct_Control_Seat_Right_Render.png|128px]][[File:Arcade_Direct_Control_Seat_Front_Render.png|128px]][[File:Arcade_Direct_Control_Seat_Left_Render.png|128px]][[File:Arcade_Direct_Control_Seat_Bottom_Render.png|128px]]|customID=carouselDirectControlPrompt|title=Direct Control Prompt}} | ||
A carousel for images listed in the image field; cycles between images when the arrows are selected. | A carousel for images listed in the image field; cycles between images when the arrows are selected. | ||
Clicking a dot will take you to that item in the list of images. | |||
''[[Special:WhatLinksHere/{{FULLPAGENAMEE}}|Pages that use this template]]'' | |||
==Usage== | ==Usage== | ||
<pre> | <pre> | ||
{{ImageCarousel|images=[[File:Image_1.png]][[File:Image_2.png]][[File:Image_3.png]]|customID=yourCarousel}}</pre> | {{ImageCarousel|images=[[File:Image_1.png]][[File:Image_2.png]][[File:Image_3.png]]|customID=yourCarousel|title=Top Text}}</pre> | ||
images - list of images | images - list of images | ||
| Line 29: | Line 28: | ||
customID - if multiple carousels are needed per page, each needs a different id to work | customID - if multiple carousels are needed per page, each needs a different id to work | ||
[[Category: | title - text displayed above the carousel | ||
[[Category:Image templates]] | |||
</noinclude> | </noinclude> | ||
Latest revision as of 18:32, 18 June 2024
Circuit Node
Direct Control Prompt
A carousel for images listed in the image field; cycles between images when the arrows are selected.
Clicking a dot will take you to that item in the list of images.
Usage
{{ImageCarousel|images=[[File:Image_1.png]][[File:Image_2.png]][[File:Image_3.png]]|customID=yourCarousel|title=Top Text}}
images - list of images
customID - if multiple carousels are needed per page, each needs a different id to work
title - text displayed above the carousel