Minimal Text Slider With Pure JavaScript – TxSlider

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
}