Basic Responsive jQuery News Ticker Plugin - TickerMePink

File Size: 6.32 KB
Views Total: 15456
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Basic Responsive jQuery News Ticker Plugin - TickerMePink

TickerMePink is a simple, lightweight and responsive jQuery news ticker plugin which allows you to play and pause a fading list of inline elements.

How to use it:

1. Include jQuery library and the jQuery tickerMePink plugin in your Html page.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="assets/js/tickerme.min.js"></script>

2. Create a list of text for the news ticker.

<ul id="ticker">
  <li>Your content goes here.</li>
  <li>Your content goes here.</li>
  <li>Your content goes here.</li>
  ...
</ul>

3. Initialize the news ticker with default settings.

$('#ticker').tickerme();

4. The plugin will automatically add an unique ID '#ticker_container' to the news ticker's container so that you can easily customize the styles in the CSS.

#ticker_container {
  ...
}

5. All the default settings.

  • fade_speed: 500: The speed each story will fade in and out
  • duration: 3000: The length of time a story is on the screen (milliseconds). 
  • auto_stop: true: Automatically stop when the previous or next button is clicked
  • type: 'fade': Fade out the current item, replace it with the next one, and fade it in
  • control_colour: '#333333': The colour of the play, pause, previous and next controls.
  • control_rollover: '#666666': The colour of the control buttons on rollover. 

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