jQuery Bootstrap Based Responsive News Ticker Plugin

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.
jquery-news-ticker

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">
 
<!--JS -->
    <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

<style>
.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; 
}
</style>



HTML

Add html text under ul li element which need scroll as news ticker.

<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="demo1">
									<li class="news-item">
										<table cellpadding="4">
											<tr>
												<td><img src="http://placeimg.com/100/100/animals" width="60" class="img-circle" /></td>
												<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in venenatis enim... <a href="#">Read more...</a></td>
											</tr>
										</table>
									</li>
									<li class="news-item">
										<table cellpadding="4">
											<tr>
												<td><img src="http://placeimg.com/100/100/animals" width="60" class="img-circle" /></td>
												<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in venenatis enim... <a href="#">Read more...</a></td>
 
	<br />		</tr>
										</table>
									</li>
									<li class="news-item">
										<table cellpadding="4">
											<tr>
												<td><img src="http://placeimg.com/100/100/animals" width="60" class="img-circle" /></td>
												<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in venenatis enim... <a href="#">Read more...</a></td>
											</tr>
										</table>
									</li>
									<li class="news-item">
										<table cellpadding="4">
											<tr>
												<td><img src="http://placeimg.com/100/100/animals" width="60" class="img-circle" /></td>
												<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in venenatis enim... <a href="#">Read more...</a></td>
											</tr>
										</table>
									</li>
									<li class="news-item">
										<table cellpadding="4">
											<tr>
												<td><img src="http://placeimg.com/100/100/animals" width="60" class="img-circle" /></td>
												<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in venenatis enim... <a href="#">Read more...</a></td>
											</tr>
										</table>
									</li>
									<li class="news-item">
										<table cellpadding="4">
											<tr>
												<td><img src="http://placeimg.com/100/100/animals" width="60" class="img-circle" /></td>
												<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in venenatis enim... <a href="#">Read more...</a></td>
											</tr>
										</table>
									</li>
									<li class="news-item">
										<table cellpadding="4">
											<tr>
												<td><img src="http://placeimg.com/100/100/animals" width="60" class="img-circle" /></td>
												<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in venenatis enim... <a href="#">Read more...</a></td>
											</tr>
										</table>
									</li>
								</ul>
							</div>
						</div>
					</div>
					<div class="panel-footer">
 
					</div>
				</div>

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.

DEMO | DOWNLOAD

Visit official github repository for more information.



Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.