Feature-rich News Ticker With Controls - Acmeticker

File Size: 153 KB
Views Total: 14565
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Feature-rich News Ticker With Controls - Acmeticker

Acmeticker is an easy-to-use jQuery plugin to create horizontal or vertical news tickers with next/prev/play/pause controls.

More Features:

  • 4 types: horizontal, vertical, marquee, and typewriter.
  • Autoplay and Pause on hover and/or focus.
  • Configurable animation speed.
  • Supports up/down & left/right directions.

See Also:

How to use it:

1. Load the compiled stylesheet in the head section of the document.

<link rel="stylesheet" href="/path/to/assets/css/style.css" />

2. Add your content together with the lable & controls to the news ticker container.

<div class="acme-news-ticker">
  <div class="acme-news-ticker-label">News Ticker Label</div>
  <div class="acme-news-ticker-box">
    <ul class="my-news-ticker">
        <a href="#">Breaking News 1</a>
        <a href="#">Breaking News 2</a>
        <a href="#">Breaking News 3</a>
  <div class="acme-news-ticker-controls acme-news-ticker-horizontal-controls">
    <span class="acme-news-ticker-arrow acme-news-ticker-prev"></span>
    <span class="acme-news-ticker-pause"></span>
    <span class="acme-news-ticker-arrow acme-news-ticker-next"></span>

3. Load the main JavaScript acmeticker.js after jQuery library.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/assets/js/acmeticker.js"></script>

4. Initialize the news ticker and enable the controls.

  controls: {
    prev: $('.acme-news-ticker-prev'),
    toggle: $('.acme-news-ticker-pause'),
    next: $('.acme-news-ticker-next')

5. Determine the news ticker type you prefer:

  • horizontal: Horizontal layout. Only one entry is displayed at a time.
  • vertical: Vertical layout. Only one entry is displayed at a time.
  • marquee: Scrolls through entries just like the <marquee />.
  • typewriter: Output entries with a typing effect.
  type: 'horizontal'

6. Determine the autoplay interval. Default: 2000(ms).

  autoplay: 2000

7. Determine the animation speed. Default: 50(ms).

  speed: 50

8. Determine the direction of the news ticker. Default: up/down/left/right.

  direction: 'up'

9. Determine whether to pause the news ticker on focus or hover. Default: true.

  pauseOnFocus: true,
  pauseOnHover: true



  • remove console.log


  • Fixed: restart() doesn't execute bacause out of the event


  • span change to button for keyboard navigation

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