Deslizador de texto minimalista con JavaScript puro-TxSlider

Vista prévia

Descripción

TxSlider es una librería JavaScript muy simple y ligera para rotar a través de una matriz de objetos de texto con varios efectos.

Funcionamiento

Descargue el TxSlider y coloque el archivo JavaScript txslider. js en la página web cuando sea necesario.

<script src="txslider.js"></script>

Cree un contenedor DIV para el control deslizante de texto.

<div id="tx"></div>

Estilo del control deslizante de texto con la "posición" esencial & atributos de desbordamiento de la siguiente manera:

#tx {

 height: 20px;

width: 300px;

position: absolute;

overflow: hidden;

border-bottom: 1px solid black;

margin: 20% 35%;
}

Defina sus datos de texto en una matriz como esta:

var data = [


{






text: "Hello world"


}, {






text: "Lorem ipsum dolor."


}, {






text: "Numbers 1234567"


}, {






text: "Hosein2398"


}, {






text: "Nice!"


}
];

Establezca el efecto de transición para el control deslizante de texto. Efectos disponibles:

• Down (predeterminado)
• Pulse
• Flash
• Izquierda
• Arriba
• Gire
• Gire2

var tx_conf = {


effect: "Flash"
}

Establezca la dirección del texto.

var tx_conf = {


dir : "rtl"
}

Establezca la duración y el retardo de la animación.

var tx_conf = {


timer: 2,


stayIn: 1
}

Deshabilite & habilite el bucle infinito.

var tx_conf = {


infinit: false
}