Responsive jQuery News Ticker Plugin with Bootstrap - Bootstrap News Box

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:

• 10 Best News Ticker Plugins In jQuery And Pure JavaScript/CSS

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.