TimedSlider

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

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.

<div 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>
</div>

Demos

Slide #1

Slide #2

Slide #3

What is this, a birdplaneUFOsharknado?

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

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>

Text above can be found here (edit)