News Ticker help website owner to display latest news about site with auto scroll features so that website visitor can get update latest news about, As you have seen many news sites uses this feature on home page to display lot’s of news heading with auto scroll or up down navigation buttons to display latest news. So In this post i am going to introduce a awesome light weight and simple jQuery Bootstrap Based Responsive News Ticker Plugin to display news or any text you want to scroll on home page or sidebar so that your site visitor can get engage with latest or trading news topics.
Integrate jQuery Bootstrap Based Responsive News Ticker Plugin On Website
A jQuery and Bootstrap 3 based plugin for creating a clean responsive news ticker/slider that allows you to vertically scroll html contents with autoplay and up/down navigation support..
Libraries
This news ticker/text scroller dependent on bootstrap library so first include bootstrap on page after that include jquery.bootstrap.newsbox.min.js to create responsive news ticker.
CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous">script>
<script src="jquery.bootstrap.newsbox.min.js" type="text/javascript">script>
|
CSS
Add some CSS on page for styling new ticker
HTML
Add html text under ul li element which need scroll as news ticker.
>
>
>
=“panel-footer”>
>
>
JS
Finally call bootstrapNews function on page to make text scrollable like news ticker, you can set news per page, autoplay and direction to news ticker as per your need.
<script> $(function () { $(".demo1").bootstrapNews({ newsPerPage: 5, autoplay: true, pauseOnHover:true, direction: 'up', newsTickerInterval: 4000, onToDo: function () { //console.log(this); } }); }); script> |
See live demo and download source code.
Visit official github repository for more information.