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

File Size: | 195 KB |
---|---|
Views Total: | 199663 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
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.