Wikia

Wikia Developers Wiki

TimedSlider

Talk1
702pages on
this wiki
TimedSlider
TypeJavaScript
DescriptionLightweight slider that automatically changes slides based on a timer
ScopeFor site-wide use
Author(s)Mathmagician
Updated13 July 2013
Code/code.js
/style.css
SkinsMonobook
Oasis
LanguagesNot applicable

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.

Installation

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.
    importArticles({
        type: 'script',
        articles: [
            'u:dev:TimedSlider/code.js'
        ]
    });
  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.

Usage

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>
</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">[https://www.google.com/search?output=search&q=sharknado sharknado]</span>
</span>

Demos

Slide #1
Slide #2
Slide #3

What is this, a birdplaneUFOsharknado?


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

Timedslider1
Timedslider2
Timedslider3
Timedslider4

Configuration

Option
data-delay-ms
Description
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.
Example
<div class="ts-container" data-delay-ms="500">
    <!-- slides inside the container, as shown in the Usage section -->
</div>

Updates

13 July 2013
Mathmagician created.

Around Wikia's network

Random Wiki