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.