Infinite News Ticker Plugin with jQuery - tickerNews

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.