Basic Text Rotator In jQuery - textTimeSlider

File Size: 3.62 KB
Views Total: 1882
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Basic Text Rotator In jQuery - textTimeSlider

textTimeSlider is a super simple and easy-to-use jQuery text rotator that uses jQuery fadeIn and fadeOut API to automatically fade through an array of text at a certain speed.

How to use it:

1. Download the plugin and insert the JavaScript file textTimeSlider.js after jQuery but before the closing body tag.

<script src="https://code.jquery.com/jquery-3.3.1.min.js" 
        integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" 
        crossorigin="anonymous">
</script>
<script src="textTimeSlider.js"></script>

2. Create an empty element to hold your text rotator.

Welcome to: <tts></tts>.

3. Call the function on the element and specify the text & duration arrays as follows:

var myText = ["jQuery", "Script", ".Net"]
var myDuration = [2000, 4000, 6000]

$( "tts" ).textTimeSlider(myText, myDuration);

4. To disable the infinite loop, just set the 'loop' parameter to 'false'.

var myText = ["jQuery", "Script", ".Net"]
var myDuration = [2000, 4000, 6000]

$( "tts" ).textTimeSlider(myText, myDuration, false);

This awesome jQuery plugin is developed by rbpaul2. For more Advanced Usages, please check the demo page or visit the official website.