Template:ImageCarousel: Difference between revisions

From Imagisphere
Jump to navigation Jump to search
mNo edit summary
No edit summary
Line 1: Line 1:
<includeonly><div class="imagecarousel" style="margin-top:-50px">
<includeonly>
{|
<div class="imagecarousel" style="margin-top:-50px">
|<span>[[File:Tweak_Generic_Arrow_Lesser.svg|32px]]</span><span id="{{{customID|image}}}" style="display:none;">{{{images|[[File:Base_Logic_LCD_Circle_Circuit_Node_Front_Render.png|128px]]}}}</span><span id="carouselScript" data-id="{{{customID|image}}}">[[File:Base_Logic_LCD_Circle_Circuit_Node_Front_Render.png|128px]]</span><span>[[File:Tweak_Generic_Arrow_Greater.svg|32px]]</span>
<span id="{{{customID|imageCarousel}}}_Left" style="cursor: pointer;">[[File:Tweak_Generic_Arrow_Lesser.svg|32px|link=]]
|-style="text-align:center;"
</span>
|<span>[[File:Image_Carousel_Dot_Off.png|32px]][[File:Image_Carousel_Dot_On.png|32px]][[File:Image_Carousel_Dot_Off.png|32px]]</span>
<span id="{{{customID|imageCarousel}}}_Images" style="display: none;">{{{images|[[File:Base_Logic_LCD_Circle_Circuit_Node_Front_Render.png|128px]]}}}</span>
|}</div></includeonly>
<span id="{{{customID|imageCarousel}}}_ImageDisplay"></span>
<span id="{{{customID|imageCarousel}}}_Right"style="cursor: pointer;">[[File:Tweak_Generic_Arrow_Greater.svg|32px|link=]]
</span>
<span id="{{{customID|imageCarousel}}}_DotOff" style="display: none;">[[File:Image_Carousel_Dot_Off.png|32px|link=]]</span>
<span id="{{{customID|imageCarousel}}}_DotOn" style="display: none;">[[File:Image_Carousel_Dot_On.png|32px|link=]]</span>
<span id="{{{customID|imageCarousel}}}_DotsRow"></span>
<span id="carouselScript" data-id="{{{customID|image}}}"></span>
</div>
</includeonly>
<noinclude>
<noinclude>
{{ImageCarousel|text=Circuit Node|images=[[File:Base_Logic_LCD_Circle_Circuit_Node_Front_Render.png|128px]]|customID=carouselCircuitNode1}}
{{ImageCarousel|text=Circuit Node|images=[[File:Base_Logic_LCD_Circle_Circuit_Node_Front_Render.png|128px]][[File:Image_Carousel_Dot_On.png|128px]]|customID=carouselCircuitNode1}}
{{ImageCarousel|text=Circuit Node|images=[[File:Base_Logic_LCD_Circle_Circuit_Node_Front_Render.png|128px]]|customID=carouselCircuitNode2}}
{{ImageCarousel|text=Circuit Node|images=[[File:Base_Logic_LCD_Circle_Circuit_Node_Front_Render.png|128px]][[File:Image_Carousel_Dot_On.png|128px]]|customID=carouselCircuitNode2}}


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.

Revision as of 22:58, 8 August 2023


Tweak Generic Arrow Lesser.svg Tweak Generic Arrow Greater.svg


Tweak Generic Arrow Lesser.svg Tweak Generic Arrow Greater.svg


A carousel for images listed in the image field; cycles between images when the arrows are selected.

Usage

{{ImageCarousel|images=[[File:Image_1.png]][[File:Image_2.png]][[File:Image_3.png]]|customID=yourCarousel}}

text - optional name of item displayed

images - list of images

customID - if multiple carousels are needed per page, each needs a different id to work