<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <script src="http://www.jqueryscript.net/demo/Responsive-jQuery-News-Ticker-Plugin-with-Bootstrap-3-Bootstrap-News-Box/scripts/jquery.bootstrap.newsbox.min.js" type="text/javascript"></script> <div class="row"> <div class="col-md-4"> <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" style="overflow-y: hidden; height: 210px;"> <li style="" class="news-item"> <table cellpadding="4"> <tbody><tr> <td><img src="images/1.png" 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> </tbody></table> </li><li style="" class="news-item"> <table cellpadding="4"> <tbody><tr> <td><img src="images/2.png" 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> </tbody></table> </li><li style="" class="news-item"> <table cellpadding="4"> <tbody><tr> <td><img src="images/3.png" 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> </tbody></table> </li><li style="display:none;" class="news-item"> <table cellpadding="4"> <tbody><tr> <td><img src="images/4.png" 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> </tbody></table> </li><li style="display:none;" class="news-item"> <table cellpadding="4"> <tbody><tr> <td><img src="images/5.png" 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> </tbody></table> </li><li style="display:none;" class="news-item"> <table cellpadding="4"> <tbody><tr> <td><img src="images/6.png" 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> </tbody></table> </li><li style="display:none;" class="news-item"> <table cellpadding="4"> <tbody><tr> <td><img src="images/7.png" 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> </tbody></table> </li></ul> </div> </div> </div> <div class="panel-footer"> <ul class="pagination pull-right" style="margin: 0px;"><li><a href="#" class="prev"><span class="glyphicon glyphicon-chevron-down"></span></a></li><li><a href="#" class="next"><span class="glyphicon glyphicon-chevron-up"></span></a></li></ul><div class="clearfix"></div></div> </div> </div> </div>

$(function () { $(".demo1").bootstrapNews({ newsPerPage: 3, autoplay: true, pauseOnHover:true, direction: 'up', newsTickerInterval: 4000, onToDo: function () { //console.log(this); } }); });