Author: | hosein2398 |
---|---|
Views Total: | 8,419 views |
Official Page: | Go to website |
Last Update: | December 20, 2016 |
License: | MIT |
Preview:

Description:
TxSlider is a really simple and lightweight JavaScript library for rotating through an array of text objects with various effects.
How to use it:
Download the TxSlider and place the JavaScript file txslider.js into the webpage when needed.
<script src="txslider.js"></script>
Create a DIV container for the text slider.
<div id="tx"></div>
Style the text slider with the essential ‘position’ & ‘overflow’ attributes as follows:
#tx { height: 20px; width: 300px; position: absolute; overflow: hidden; border-bottom: 1px solid black; margin: 20% 35%; }
Define your text data in an array like this:
var data = [ { text: "Hello world" }, { text: "Lorem ipsum dolor." }, { text: "Numbers 1234567" }, { text: "Hosein2398" }, { text: "Nice!" } ];
Set the transition effect for the text slider. Available effects:
- down (default)
- press
- flash
- left
- top
- rotate
- rotate2
var tx_conf = { effect: "flash" }
Set the text direction.
var tx_conf = { dir : "rtl" }
Set the animation duration and delay.
var tx_conf = { timer: 2, stayIn: 1 }
Disable & enable the infinite loop.
var tx_conf = { infinit: false }