Smooth Content Scroller Plugin with jQuery - Text Scroller
File Size: | 72.5 KB |
---|---|
Views Total: | 1842 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

Text Scroller is a lightweight jQuery plugin that provides an easy way to vertically or horizontally scroll through the content in a fixed width/height container.
How to use it:
1. Import jQuery library together with jQuery text scroller plugin' stylesheet and JavaScript into your webpage.
<link rel="stylesheet" href="css/jquery.textscroller.css"> <script src="//code.jquery.com/jquery-1.11.2.min.js"></script> <script src="js/jquery.textscroller-0.1.0-min.js"></script>
2. Wrap your long text into a container.
<div class="demo-1"> ... </div>
3. Call the plugin to create a basic vertical text scroller.
jQuery(".demo-1").textscroller({ width : "auto", height : 200, innerTextButtonPrev : ':', innerTextButtonNext : ';' });
4. Available options to customize the text scroller.
jQuery(".demo-1").textscroller({ // CSS selectors selectorWrapperOuther : '.jquery-textscroller-wrapper-outher', selectorWrapper : '.jquery-textscroller-wrapper', selectorButtonPrev : '.jquery-textscroller-button-prev', selectorButtonNext : '.jquery-textscroller-button-next', // 'default', 'button-icon', 'default-centered-buttons' addCustomClass : 'default', // settings vertical : true, width : '100%', height : 'auto', // templates containerOuther : '<div class="jquery-textscroller-wrapper-outher"><div class="jquery-textscroller-wrapper"></div></div>', containerButtons : '<div class="jquery-textscroller-button-prev"><!-- - --></div><div class="jquery-textscroller-button-next"><!-- - --></div>', // text for prev/next buttons innerTextButtonPrev : '', innerTextButtonNext : '', // callback functions callbackBeforeInit : function(){}, callbackAfterInit : function(){}, // touch devices touchableDevice : 'ontouchstart' in window, // debug mode debug : false, debugOuputMessagePrefix : 'jQuery Textscroller : ' });
This awesome jQuery plugin is developed by shollstein. For more Advanced Usages, please check the demo page or visit the official website.