CustomSlider is a script that allows you to create a unique slider for mainpage, also you can set number of slides in wikitext, speed of scrolling, align of buttons (left/right/top/bottom), etc. Styles is fully customizable in CSS. When a slide is hovered over, scrolling stops. In addition to auto-scrolling, you can manually click on slides. There are also 2 slide animation options to choose from. The default slide transition is from left to right, and from top to bottom when a parameter is added.
Installation
Example
Menu with right buttons
<div id="SliderView">
<div id="SliderData" class="4|3000|auto" style="display:none"></div>
<ul id="SliderWrapper">
<li class="Sld SlideIMG">[[File:Slide1.png]]</li>
<li class="Sld SlideIMG">[[File:Slide2.png]]</li>
<li class="Sld SlideIMG">[[File:Slide3.png]]</li>
<li class="Sld SlideIMG">[[File:Slide4.png]]</li>
</ul>
<ul id="NavBtns" class="nmRight">
<li class="NavBtn nbActiveRight">Slide 1</li>
<li class="NavBtn">Slide 2</li>
<li class="NavBtn">Slide 3</li>
<li class="NavBtn">Slide 4</li>
</ul>
</div>
Menu with bottom center buttons-dots
<div id="SliderView">
<div id="SliderData" class="4|2000|auto" style="display:none"></div>
<ul id="SliderWrapper">
<li class="Sld SlideIMG">[[File:Slide1.png]]</li>
<li class="Sld SlideIMG">[[File:Slide2.png]]</li>
<li class="Sld SlideIMG">[[File:Slide3.png]]</li>
<li class="Sld SlideIMG">[[File:Slide4.png]]</li>
</ul>
<ul id="NavBtns" class="nmBottom nmP2"><li class="NavBtn nbActiveBottom">•</li><li class="NavBtn">•</li><li class="NavBtn">•</li><li class="NavBtn">•</li></ul>
</div>
Menu with bottom image buttons
<div id="SliderView">
<div id="SliderData" class="4|2000|auto|down" style="display:none"></div>
<ul id="SliderWrapper">
<li class="Sld SlideIMG">[[File:Slide1.png]]</li>
<li class="Sld SlideIMG">[[File:Slide2.png]]</li>
<li class="Sld SlideIMG">[[File:Slide3.png]]</li>
<li class="Sld SlideIMG">[[File:Slide4.png]]</li>
</ul>
<ul id="NavBtns" class="nmBottom nmP2">
<li class="NavBtn nbActiveBottom">[[File:Slide1.png|70px|link=]]</li>
<li class="NavBtn">[[File:Slide2.png|70px|link=]]</li>
<li class="NavBtn">[[File:Slide3.png|70px|link=]]</li>
<li class="NavBtn">[[File:Slide4.png|70px|link=]]</li>
</ul>
</div>
Wikitext options
- SliderData - optional parameter: class="<number of buttons>|<slide interval>|height (auto)|<animation up down> (down)"
- Sld - (normal slide)
- Sld SlideIMG - slide with scaling to width of screen (it is recommended to use this option for all slides)
- NavBtn - for menu button
- nmLeft, nmRight, nmTop, nmBottom - menu buttons location (align: [none] - default, nmP2 - center, nmP3 - opposite side)
- nbActiveLeft, nbActiveRight, nbActiveTop, nbActiveBottom - active button style
- To avoid padding between menu buttons with horizontal layout, list items [li] need to write a single line.
Text above can be found here (edit)