Infinite News Ticker Plugin with jQuery - tickerNews
File Size: | 12.2 KB |
---|---|
Views Total: | 34799 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

tickerNews is a super light jQuery news ticker plugin that allows you to scroll through a list of items infinitely, similar to the legacy
marquee element.
How to use it:
1. Markup Html structure.
<div class="TickerNews" id="example"> <div class="ti_wrapper"> <div class="ti_slide"> <div class="ti_content"> <div class="ti_news"><a href="#">11:00 US fisherman rescued by tanker after 66 days lost at sea</a></div> <div class="ti_news"><a href="#">12:00 Overseas aid must rise by £1bn in next two years, says Europe</a></div> <div class="ti_news"><a href="#">13:00 Muslim population looks likely to double in size </a></div> <div class="ti_news"><a href="#">15:00 Heathrow cuts passenger levy to boost domestic flights</a></div> <div class="ti_news"><a href="#">16:00 Couple plotted to sell their new baby online for €5,000 </a></div> </div> </div> </div> </div>
2. The basic styles for the news ticker.
.TickerNews { width: 100%; height: 50px; line-height: 50px; } .ti_wrapper { width: 100%; position: relative; overflow: hidden; height: 50px; } .ti_slide { width: 30000px; position: relative; left: 0; top: 0; } .ti_content { width: 8000px; position: relative; float: left; } .ti_news { float: left; }
3. Load jQuery library and the jQuery tickerNews plugin at the bottom of the webpage.
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script> <script src="libs/jquery.tickerNews.min.js"></script>
4. Active the news ticker.
$("#example").newsTicker();
5. Possible plugin options.
$("#example").newsTicker({ base : { width : 2100, time : 40000 }, itemWidth : "auto", ticker : ".ti_news", tickerColne : "ti_clone", wrapper : ".ti_wrapper", slide : ".ti_slide", content : ".ti_content", callbacks : { beforeLoad : function($Ticker){}, onLoad : function($current,$Ticker){}, beforeAnimation : function($old,$current){}, completeAnimation : function($old,$current){} }, });
Change log:
2016-12-13
- JS update
2016-11-30
- Fixed: Scroll Falls out of Contianer
2016-06-09
- added pause/resume methods.
This awesome jQuery plugin is developed by Frogmouth. For more Advanced Usages, please check the demo page or visit the official website.