Fandom

Wikia Developers Wiki

TimedSlider

801pages on
this wiki
Add New Page
Talk1 Share

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.

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.

Also on Fandom

Random Wiki