Los ejemplos de uso incluirían la creación de diapositivas con cualquier combinación de wikitexto o imágenes, o la creación de animaciones tipo GIF a partir de conjuntos de imágenes fijas.

Installation

Usage

Usar diapositivas de elementos de bloque

El uso básico requiere el siguiente código HTML.

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

• Para hacer un control deslizante, necesita las etiquetas <div class="ts-container"></div>.
• Para crear diapositivas individuales, agregue otra <div class="ts-slide">TU CONTENIDO AQUÍ</div> dentro del contenedor.
• Es muy recomendable (pero no obligatorio) que haga exactamente una de las diapositivas sea class="ts-active" en su HTML, como se muestra en el ejemplo anterior. Esa es la clase que define la diapositiva visible actualmente. Si hace esto, funciona como una buena opción a prueba de fallos en caso de que el JavaScript de control deslizante no se cargue.

Usar diapositivas de elementos en línea

También puede hacer diapositivas en línea, por ejemplo, cambiando una sola palabra en medio de una oración.

<div class="ts-container ts-container-inline">
    <span class="ts-slide">pájaro</span>
    <span class="ts-slide">avión</span>
    <span class="ts-slide">OVNI</span>
    <span class="ts-slide">[https://www.google.com/search?output=search&q=sharknado sharknado]</span>
</div>

Demostraciones

¿Qué es esto, un pájaroaviónOVNIsharknado?

Animación. Como un GIF, pero no lo es.

Configuration

Opción

data-delay-ms

Description

Establece el retraso (en milisegundos) entre el cambio de diapositivas. El valor predeterminado es 2000 (o 2 segundos). El valor mínimo es 100; no es posible configurar un temporizador más rápido que este.

Example

<div class="ts-container" data-delay-ms="500">
    <!-- se desliza dentro del contenedor, como se muestra en la sección Uso -->
</div>