Txslider

Txslider is js library for sliding text on web pages.

Demos

default effect:

flash effect:

press effect:

rotate effect:

Installing

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

Usage

To put this to work first add this lines of Css (you can add more styles but try not to change 'position' & 'overflow'):

#tx {
        height: 20px;
        width: 300px;
        position: absolute;
        overflow: hidden;
        border-bottom: 1px solid black;
 }

Then create a div with id of tx:

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

Add your data you want to show in var data:

var data = [
        {
            text: "Hello world"
    }, {
            text: "Lorem ipsum dolor."
    }, {
            text: "Numbers 1234567"
    }, {
            text: "Hosein2398"
    }, {
            text: "Nice!"
    }
];

And config it as you wish:

var tx_conf = {
        infinit: true,
        effect: "flash", 
        timer: 2
        //dir : "rtl"
        //stayIn: 1
    }

Paramaters

timer (string): Sets timer for slider.(default value is 4).

infinit (boolean): Sets the slider to infinite loop.

stayIn (Int): If you want to stay in one slide after that all slides has been shown. (In most cases no effect would be added to last element)

e.g. 4 will stay in forth slide.

Note : You can not use infinit and stayIn together.
Note : If you don't define infinit and stayIn both , then slider would stop sliding in last element.

effect (string): Sets the effect. list of effects:

down (default)

press

flash

left

top

rotate

rotate2

dir (string): Sets text direction for languages like Persian , Arabic , ... (you don't need this most of the time)

hosein2398/TxSlider