Bootstrap news ticker / slider with jQuery: 3 demos
The Bootstrap news ticker by using jQuery
In this article, I am going to share a nice jQuery plug-in for running news ticker vertically in your web pages. The plug-in is implemented on Bootstrap 3 framework.
The news ticker is auto play as well as supports up/down manual movement. You may scroll any content in up and down direction including text, images etc.
A demo of vertical news ticker
In this demo, the news ticker moves automatically towards down direction. You may set the number of news items at a time, auto play, whether news item should pause on mouse over or not, direction and interval for moving to next items by using the options in the jQuery code:
See online demo and code
The script for this example:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<script type="text/javascript"> $(function () { $(".news-demo-down-auto").bootstrapNews({ newsPerPage: 3, autoplay: true, pauseOnHover: true, navigation: false, direction: 'down', newsTickerInterval: 1500, onToDo: function () { } }); }); </script> |
The markup:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 |
<div class="container"> <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>Technology News</b></div> <div class="panel-body"> <div class="row"> <div class="col-xs-12"> <ul class="news-demo-down-auto"> <li class="news-item">Python new version is released..<a href="#">Read more...</a></li> <li class="news-item">Get ready for Bootstrap 4.... <br />Compare with Bootstrap 3 <a href="#">Read more...</a></li> <li class="news-item">New forms in Bootstrap.. <a href="#">Read more...</a></li> <li class="news-item">PHP date ... <a href="#">Read more...</a></li> <li class="news-item">Read about Java update ... <a href="#">Read more...</a></li> <li class="news-item">HTML 5... <a href="#">Read more...</a></li> </ul> </div> </div> </div> <div class="panel-footer"> </div> </div> </div> </div> </div> |
You can see, three items are displayed as the demo page loaded. The news ticker will pause as you bring the mouse over any news item.
In real time website, you may want to use the bigger interval than 1500 milliseconds. I have used it for demo purpose for showing how it works.
As mentioned earlier, you may set the auto play option false, so letting the visitors navigating the news manually by using the up/down icons.
See online demo and code
The markup remains the same for this demo as in above example.
The jQuery code:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<script type="text/javascript"> $(function () { $("#news-demo-manual").bootstrapNews({ newsPerPage: 3, autoplay: false, onToDo: function () { } }); }); </script> |
A demo with images and up direction
In this demo, the images are used with the news text. The direction of the news slider is kept towards up direction while you may navigate manually as well as ticker will move automatically. Have a look:
See online demo and code
The markup for this example:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 |
<div class="container"> <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 ticker with images</b></div> <div class="panel-body"> <div class="row"> <div class="col-xs-12"> <ul class="news-ticker-images"> <li class="news-item"> <table cellpadding="4"> <tr> <td><img src="images/1.png" width="60" class="img-circle" /></td> <td>Python new version is released.. <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>Get ready for Bootstrap 4.... <br />Compare with Bootstrap 3 <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>New forms in Bootstrap.. <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>PHP date ... <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>Read about Java update ... . <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="panel-footer"> </div> </div> </div> </div> </div> |
The script:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<script type="text/javascript"> $(function () { $(".news-ticker-images").bootstrapNews({ newsPerPage: 4, autoplay: true, pauseOnHover:true, direction: 'up', newsTickerInterval: 2000, onToDo: function () { } }); }); </script> |
Setting up this news ticker jQuery plug-in
Step 1:
You may download the complete package of the plug-in from the Github website (Credit: gagi270683). You may also get the required JS and CSS files from the demo page (view source).
Step 2:
Include the references of Bootstrap CSS, plug-in CSS, jQuery and plug-in JS files in the head section of web page.
Step 3:
Use the markup and options in jQuery code as used in the demos.