Smooth Content Scroller Plugin with jQuery - Text Scroller
| File Size: | 72.5 KB |
|---|---|
| Views Total: | 1873 |
| 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.











