Responsive jQuery News Ticker Plugin with Bootstrap 3 - Bootstrap News Box

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.

Related plugins:

• jQuery Plugin For Animated Vertical Ticker - totem
• Flexible jQuery Vertical News Ticker Plugin - Advanced News Ticker
• Flexible & Customizable jQuery News Ticker Plugin - Easy Ticker
• 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

How to use it:

1. Load the latest Twitter Bootstrap 3's CSS files in the page.

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap-theme.min.css">

2. Load the jQuery Bootstrap News Box plugin in the page, make sure you have jQuery library loaded.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="scripts/jquery.bootstrap.newsbox.min.js" type="text/javascript"></script>

3. Create a vertical news ticker using bootstrap 3 markup structure.

<div class="panel panel-default">
<div class="panel-heading"> <span class="glyphicon glyphicon-list-alt"></span><b>News</b></div>
<div class="panel-body">
<div class="row">
<div class="col-xs-12">
<ul class="demo">

<li class="news-item">
<table cellpadding="4">
<tr>
<td><img src="images/1.png" width="60" class="img-circle" /></td>
<td> News 1<a href="#">Read more...</a></td>
</tr>
</table>
</li>

<li class="news-item">
<table cellpadding="4">
<tr>
<td><img src="images/2.png" width="60" class="img-circle" /></td>
<td> News 2<a href="#">Read more...</a></td>
</tr>
</table>
</li>

<li class="news-item">
<table cellpadding="4">
<tr>
<td><img src="images/3.png" width="60" class="img-circle" /></td>
<td> News 3<a href="#">Read more...</a></td>
</tr>
</table>
</li>

...

</ul>
</div>
</div>
</div>
<div class="panel-footer"> </div>
</div>

4. A little bit more CSS to style the list items.

.glyphicon {
margin-right: 4px !important; /*override*/
}
.pagination .glyphicon {
margin-right: 0px !important; /*override*/
}
.pagination a {
color: #555;
}
.panel ul {
padding: 0px;
margin: 0px;
list-style: none;
}
.news-item {
padding: 4px 4px;
margin: 0px;
border-bottom: 1px dotted #555;
}

5. Call the plugin with optional settings.

<script type="text/javascript">
$(function () {
$(".demo").bootstrapNews({
newsPerPage: 4,
navigation: true,
autoplay: true,
direction:'up', // up or down
animationSpeed: 'normal',
newsTickerInterval: 4000, //4 secs
pauseOnHover: true,
onStop: null,
onPause: null,
onReset: null,
onPrev: null,
onNext: null,
onToDo: null
});
});
</script>

---

This awesome jQuery plugin is developed by gagi270683. For more Advanced Usages, please check the demo page or visit the official website.