This time I will share jQuery Plugin and tutorial about Flexible & Customizable jQuery News Ticker Plugin – Easy Ticker, hope it will help you in programming stack.
| File Size: | 18.4 KB |
|---|---|
| Views Total: | 33837 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
Easy Ticker is a jQuery plugin helps you create a highly customizable, cross browser, SEO-friendly flexible and infinite news ticker on your web page.
Features:
- Lightweight (~3kb minified) and easy to use
- Allows to scroll down or up the items in your news ticker.
- Auto scroll on page loaded and stop on mouse hover.
- Allows to control the behavior out of the box.
- Customizable easing and animation options.
Related plugins:
- jQuery Plugin For Animated Vertical Ticker – totem
- BBC News-Like Website Ticker Plugin with jQuery – News Ticker
- Highly Customizable jQuery Text Scrolling Plugin – Web Ticker
- Tumblr News Ticker Widget with jQuery
- jQuery Vertical Scrolling Web Ticker Plugin – vticker
- News Ticker Like Content Scrolling Plugin For jQuery – Easy Ticker
- Easy jQuery Scrolling News Ticker Plugin – liScroll
Basic Usage:
1. Include the latest jQuery library together with jquery.easy-ticker.js on your documents.
1 |
<script src="/path/to/cdn/jquery.min.js"></script> |
2 |
<script src="/path/to/dist/jquery.easy-ticker.min.js"></script> |
2. Include jQuery easing plugin for easing functions. (OPTIONAL)
1 |
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script> |
3. Create the html for your news ticker.
01 |
<div class="demo"> |
02 |
<ul> |
03 |
<li> |
04 |
<img src="https://www.jqueryscript.net/small/images/jQuery-Plugin-To-Expand-Collapse-Input-Field-Expandable-Input.jpg" alt="Expandable Input" /> |
05 |
<a href="https://www.jqueryscript.net/form/jQuery-Plugin-To-Expand-Collapse-Input-Field-Expandable-Input.html">Expandable Input</a> |
06 |
<p>Expandable Input is a minimal jQuery plugin to smoothly expand the width of a input filed when focused/clicked and collapse it when lose focus.</p> |
07 |
</li> |
08 |
<li class="odd"> |
09 |
<img src="https://www.jqueryscript.net/small/images/Creating-A-Full-Page-Photo-<a href="https://www.jqueryscript.net/gallery/">Gallery</a>-with-jQuery-Photor-Plugin.jpg" alt="jQuery Photor Plugin" /> |
10 |
<a href="https://www.jqueryscript.net/gallery/Creating-A-Full-Page-Photo-Gallery-with-jQuery-Photor-Plugin.html">jQuery Photor Plugin</a> |
11 |
<p>Photor is a fast and easy jQuery plugin to create a responsive & touch-friendly full page image gallery with CSS3 transitions and transforms.</p> |
12 |
</li> |
13 |
<li> |
14 |
<img src="https://www.jqueryscript.net/small/images/Windows-8-Style-jQuery-Data-Table-Decorator-Metreaux-Tables.jpg" alt="Metreaux Tables" /> |
15 |
<a href="https://www.jqueryscript.net/table/Windows-8-Style-jQuery-Data-Table-Decorator-Metreaux-Tables.html">Metreaux Tables</a> |
16 |
<p>Metreaux Tables is a jQuery plugin to create nice, clean, themeable, andmodern Windows 8 UI Style data tables with the power of DataTables jQuery javascript library.</p> |
17 |
</li> |
18 |
... |
19 |
</ul> |
20 |
</div> |
4. Call the plugin with default settings. That’s it.
1 |
$(function(){ |
2 |
$('.demo').easyTicker(); |
3 |
}); |
5. All possible options to config the news ticker.
01 |
$('.demo').easyTicker({ |
02 |
03 |
// or 'down' |
04 |
direction: 'up', |
05 |
06 |
// easing function |
07 |
easing: 'swing', |
08 |
09 |
// animation speed |
10 |
speed: 'slow', |
11 |
12 |
// animation delay |
13 |
interval: 2000, |
14 |
15 |
// height |
16 |
height: 'auto', |
17 |
18 |
// the number of visible elements of the list |
19 |
visible: 0, |
20 |
21 |
// enables pause on hover |
22 |
mousePause: 1, |
23 |
24 |
// custom controls |
25 |
controls: { |
26 |
up: '', |
27 |
down: '', |
28 |
toggle: '', |
29 |
playText: 'Play', |
30 |
stopText: 'Stop' |
31 |
}, |
32 |
33 |
// callbacks |
34 |
callbacks: { |
35 |
before: function(ul, li){ |
36 |
// do something |
37 |
}, |
38 |
after: function(ul, li){ |
39 |
// do something |
40 |
} |
41 |
} |
42 |
|
43 |
}); |
Changelog:
2020-04-13
- v3.1.0: Fix high CPU consumption bug
This awesome jQuery plugin is developed by vaakash. For more Advanced Usages, please check the demo page or visit the official website.
