Responsive jQuery News Ticker Plugin with Bootstrap - Bootstrap News Box
File Size: | 92.6 KB |
---|---|
Views Total: | 213289 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

A jQuery and Bootstrap 4 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.
Bootstrap 3 Version is now available here.
See Also:
How to use it:
1. Load the latest Twitter Bootstrap's stylesheet and Font Awesome Iconic Font in the document.
<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" /> <link rel="stylesheet" href="/path/to/cdn/font-awesome/all.min.css" />
2. Load the jQuery Bootstrap News Box plugin in the page, make sure you already have the latest jQuery library loaded.
<script src="/path/to/cdn/jquery.slim.min.js"></script> <script src="/path/to/jquery.bootstrap.newsbox.min.js"></script>
3. Create a vertical news ticker using Bootstrap's card component as follows:
<div class="card"> <div class="card-header"> <span class="glyphicon glyphicon-list-alt"></span><b>News</b></div> <div class="card-body"> <div class="row"> <div class="col-xs-12"> <ul class="demo1"> <li class="news-item"> <table cellpadding="4"> <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> </table> </li> <li class="news-item"> <table cellpadding="4"> <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> </table> </li> <li class="news-item"> <table cellpadding="4"> <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> </table> </li> <li class="news-item"> <table cellpadding="4"> <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> </table> </li> <li class="news-item"> <table cellpadding="4"> <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> </table> </li> <li class="news-item"> <table cellpadding="4"> <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> </table> </li> <li class="news-item"> <table cellpadding="4"> <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> </table> </li> </ul> </div> </div> </div> <div class="card-footer"> </div> </div>
4. A little bit more CSS to style the list items.
.fas { margin-right: 4px !important; /*override*/ } .fas .glyphicon { margin-right: 0px !important; /*override*/ } .pagination a { color: #555; } .card ul { padding: 0px; margin: 0px; list-style: none; } .news-item { padding: 4px 4px; margin: 0px; border-bottom: 1px dotted #555; }
5. Call the plugin on the list and done.
$(".demo1").bootstrapNews({ // options here });
6. Possible options to customize the news ticker.
$(".demo1").bootstrapNews({ // number of items per page newsPerPage: 4, // shows up/down navigation navigation: true, // enables autoplay autoplay: true, // or 'down' direction:'up', // animation speed animationSpeed: 'normal', // autoplay interval newsTickerInterval: 4000, // pause on hover pauseOnHover: true, });
7. Callback functions.
$(".demo1").bootstrapNews({ onStop: null, onPause: null, onReset: null, onPrev: null, onNext: null, onToDo: null });
Changelog:
2021-01-24
- Update for Bootstrap 4
This awesome jQuery plugin is developed by gagi270683. For more Advanced Usages, please check the demo page or visit the official website.