Feature-rich News Ticker With Controls - Acmeticker
웹비젼
Plugins
0
322
2022.07.26 17:41
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">
<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
});
demo