Smooth Horizontal Text Scroller - jQuery eocjsNewsticker

File Size: 6.37 KB
Views Total: 17821
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Smooth Horizontal Text Scroller - jQuery eocjsNewsticker

An easy yet configurable jQuery news ticker plugin which smoothly, horizontally, and infinitely scrolls through text blocks at a given speed.

Supports static text and JSON/JSONP data source (via AJAX). Perfect for breaking news, stock quotes, informational messages, etc.

See Also:

How to use it:

1. To get started, include jQuery library and the eocjsNewsticker plugin's files on the HTML page.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="eocjs-newsticker.js"></script>
<link rel="stylesheet" href="eocjs-newsticker.css" />

2. Create a static news ticker that loads content from the text block within the document.

<div id="example">This Is A Static News Ticker</div>
  // options here

3. Create a dynamic news ticker that loads content from an exteral JSON file via AJAX.

<div id="example"></div>
  type: 'ajax',
  source: 'data.json'
// data.json
  "1": "Breaking News 1", 
  "2": "Breaking News 2", 
  "3": "Breaking News 3", 
  "4": "Breaking News 4", 
  "5": "Breaking News 5"

4. Config the news ticker with the following options.


  // animation speed
  speed: 20,

  // time to wait before starting
  timeout: 1,

  // divider between news
  divider: '+++',

  // or 'ajax'
  type: 'static'

5. Customzie the AJAX mode.


  // data source
  source: '',
  // use fetch instead of $.ajax()
  fetch: false',
  // used for jsonp
  callback: 'callback', 
  // polling interval of the ajax source (seconds)
  interval: 120,

  // direction (ltr or rtl)
  'direction':  'ltr'



v0.7.3 (2024-03-18)

  • Add custom parameter to force JSON file to update

v0.7.2 (2023-08-13)

  • Accept node collection as target (start multiple newstickers with the same settings)

v0.7.1 (2023-03-10)

  • Small CSS changes
  • JS update

v0.7.0 (2022-09-26)

  • Removed the option to use jsonp, since all modern browser support the fetch API. If you still need support for jsonp, please use version 0.6.2.

v0.6.2 (2022-07-21)

  • Slide sizes are now checked again immediately before start

v0.6.1 (2022-02-16)

  • Added option to use the Fetch API

v0.5.1 (2021-10-28)

  • Minor fixes

v0.5.0 (2021-10-28)

  • Support for right-to-left languages

v0.4.2 (2021-07-21)

  • Allow Array in JSON source

v0.4.1 (2021-07-15)

  • Small performance improvements


  • Update eocjs-newsticker.css
  • Update eocjs-newsticker.js


  • JS & CSS Update


  • JS Update


  • Small Improvements


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