Bootstrap horizontal news ticker

A Bootstrap horizontal news ticker! Here's a simple example to get you started:

HTML

<div class="ticker-container">
  <ul class="ticker-list">
    <li><a rel="nofollow" target="_blank" href="#">News Item 1</a></li>
    <li><a rel="nofollow" target="_blank" href="#">News Item 2</a></li>
    <li><a rel="nofollow" target="_blank" href="#">News Item 3</a></li>
    <li><a rel="nofollow" target="_blank" href="#">News Item 4</a></li>
    <li><a rel="nofollow" target="_blank" href="#">News Item 5</a></li>
  </ul>
</div>

CSS

.ticker-container {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 30px; /* adjust the height to your liking */
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 10px;
}

.ticker-list {
  list-style: none;
  margin: 0;
  padding: 0;
  white-space: nowrap;
}

.ticker-list li {
  display: inline-block;
  margin-right: 10px;
}

.ticker-list li:last-child {
  margin-right: 0;
}

.ticker-list a {
  color: #337ab7;
  text-decoration: none;
}

.ticker-list a:hover {
  color: #23527c;
}

JavaScript (optional)

// animate the ticker
setInterval(function() {
  var tickerList = document.querySelector('.ticker-list');
  var firstItem = tickerList.querySelector('li');
  var lastItem = tickerList.querySelector('li:last-child');
  tickerList.appendChild(firstItem.cloneNode(true));
  tickerList.removeChild(lastItem);
}, 5000); // adjust the interval to your liking (in milliseconds)

Explanation

  1. We create a container element (ticker-container) with a relative position and overflow set to hidden. This will allow us to hide the content that goes beyond the container's width.
  2. Inside the container, we create an unordered list (ticker-list) with a white-space set to nowrap to prevent the list items from wrapping to a new line.
  3. Each list item (ticker-list li) is displayed as an inline-block element, which allows us to create a horizontal list.
  4. We add some basic styling to the list items, including a margin-right to separate each item.
  5. We add some basic styling to the links inside the list items, including a color and hover effect.
  6. To animate the ticker, we use JavaScript to clone the first list item and append it to the end of the list, then remove the last list item. We use setInterval to repeat this process at a specified interval (in this case, every 5 seconds).

Tips and Variations