Fandom Developers Wiki
Advertisement

TimedSlider es un control deslizante ligero que se desplaza automáticamente por un conjunto de diapositivas en función de un temporizador definido por el usuario. Las diapositivas solo tienen un estilo básico para que pueda personalizarlas aún más, según sea necesario.

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.

Instalación[]

Uso[]

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

Slide #1
Slide #2
Slide #3

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


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

Timedslider1
Timedslider2
Timedslider3
Timedslider4

Configuración[]

Opción
data-delay-ms
Descripción
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.
Ejemplo
<div class="ts-container" data-delay-ms="500">
    <!-- se desliza dentro del contenedor, como se muestra en la sección Uso -->
</div>
Advertisement