Smooth Content Scroller Plugin with jQuery - Text Scroller

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

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.