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

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.