Wikia Developers Wiki


859pages on
this wiki
Add New Page
Talk1 Share

TimedSlider is a lightweight slider that automatically tabs through a set slides based on a user-defined timer. The slides have only bare-bones styling so you can further customize them as needed.

Usage examples would include creating slides with any combination of wikitext or images, or creating GIF-like animations from sets of still frame images.


See also: Help:JavaScript and CSS Cheatsheet

  1. Add the following JavaScript to your wiki's MediaWiki:Wikia.js page (or other JS file of your choice). This is needed for the functionality that automatically switches between the slides.
        type: 'script',
        articles: [
  2. Go to the /style.css page and copy all of the CSS code to your wiki's MediaWiki:Wikia.css page (or other stylesheet of your choice). This is needed to make the slides display properly.


Using block-element slides

Basic usage requires the following HTML code.

<div class="ts-container">
	<div class="ts-slide ts-active">Slide #1</div>
	<div class="ts-slide">Slide #2</div>
	<div class="ts-slide">Slide #3</div>
  • To make a slider, you need the <div class="ts-container"></div> tags.
  • To create individual slides, add another <div class="ts-slide">YOUR CONTENT HERE</div> inside the container.
  • It is highly recommended (but not required) that you make exactly one of the slides have class="ts-active" in your HTML, as shown in the example above. That's the class that defines the currently visible slide. If you do this, it works as a nice failsafe option in case the JavaScript for the slider fails to load.

Using inline-element slides

You can also do inline slides, for example, switching a single word in the middle of a sentence.

<span class="ts-container ts-container-inline">
	<span class="ts-slide">bird</span>
	<span class="ts-slide">plane</span>
	<span class="ts-slide">UFO</span>
	<span class="ts-slide">[ sharknado]</span>


Slide #1
Slide #2
Slide #3

What is this, a birdplaneUFOsharknado?

Animation. Like a GIF, but it's not.



Sets the delay (in milliseconds) between when the slides change. Default value is 2000 (or 2 seconds). The minimum value is 100 – it is not possible to set a timer faster than this.
<div class="ts-container" data-delay-ms="500">
    <!-- slides inside the container, as shown in the Usage section -->


13 July 2013
Mathmagician created.

Ad blocker interference detected!

Wikia is a free-to-use site that makes money from advertising. We have a modified experience for viewers using ad blockers

Wikia is not accessible if you’ve made further modifications. Remove the custom ad blocker rule(s) and the page will load as expected.