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:

• 10 Best News Ticker Plugins

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">
      <li>
        <a href="#">Breaking News 1</a>
      </li>
      <li>
        <a href="#">Breaking News 2</a>
      </li>
      <li>
        <a href="#">Breaking News 3</a>
      </li>
    </ul>
  </div>
  <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>
  </div>
</div>

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.

$('.my-news-ticker').AcmeTicker({
  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.

$('.my-news-ticker').AcmeTicker({
  type: 'horizontal'
});

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

$('.my-news-ticker').AcmeTicker({
  autoplay: 2000
});

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

$('.my-news-ticker').AcmeTicker({
  speed: 50
});

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

$('.my-news-ticker').AcmeTicker({
  direction: 'up'
});

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

$('.my-news-ticker').AcmeTicker({
  pauseOnFocus: true,
  pauseOnHover: true
});

Changelog:

2022-02-11

• remove console.log

2020-03-14

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

2020-01-28

• 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.