Minimal Text Slider With Pure JavaScript – TxSlider

Category: Javascript , Slider , Text | December 20, 2016
Author:hosein2398
Views Total:8,419 views
Official Page:Go to website
Last Update:December 20, 2016
License:MIT

Preview:

Minimal Text Slider With Pure JavaScript – TxSlider

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
}

You Might Be Interested In:


Leave a Reply