Horizontal news scroller html code

Here is an example of HTML code for a horizontal news scroller:

<!-- The container for the news scroller -->
<div class="news-scroller">
  <!-- The news items -->
  <ul>
    <li><span>News Item 1</span></li>
    <li><span>News Item 2</span></li>
    <li><span>News Item 3</span></li>
    <li><span>News Item 4</span></li>
    <li><span>News Item 5</span></li>
  </ul>
  <!-- The navigation arrows -->
  <div class="nav-arrows">
    <a rel="nofollow" target="_blank" href="#" class="prev">Prev</a>
    <a rel="nofollow" target="_blank" href="#" class="next">Next</a>
  </div>
</div>

<!-- The CSS to style the news scroller -->
<style>
 .news-scroller {
    width: 500px; /* adjust the width to your liking */
    overflow: hidden;
    white-space: nowrap;
  }
 .news-scroller ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }
 .news-scroller li {
    display: inline-block;
    margin-right: 20px;
  }
 .news-scroller li span {
    font-size: 18px;
    font-weight: bold;
  }
 .nav-arrows {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
  }
 .nav-arrows a {
    font-size: 24px;
    font-weight: bold;
    color: #666;
    text-decoration: none;
  }
 .nav-arrows a:hover {
    color: #333;
  }
</style>

<!-- The JavaScript to animate the news scroller -->
<script>
  var newsScroller = document.querySelector('.news-scroller');
  var newsItems = newsScroller.querySelectorAll('li');
  var navArrows = newsScroller.querySelector('.nav-arrows');
  var prevButton = navArrows.querySelector('.prev');
  var nextButton = navArrows.querySelector('.next');
  var newsItemWidth = newsItems[0].offsetWidth;
  var newsScrollerWidth = newsScroller.offsetWidth;
  var newsItemIndex = 0;

  // Animate the news scroller
  function animateNewsScroller() {
    newsScroller.style.transform = 'translateX(' + (-newsItemWidth * newsItemIndex) + 'px)';
  }

  // Update the news scroller on window resize
  window.addEventListener('resize', function() {
    newsItemWidth = newsItems[0].offsetWidth;
    newsScrollerWidth = newsScroller.offsetWidth;
  });

  // Handle navigation button clicks
  prevButton.addEventListener('click', function() {
    newsItemIndex--;
    if (newsItemIndex < 0) {
      newsItemIndex = newsItems.length - 1;
    }
    animateNewsScroller();
  });

  nextButton.addEventListener('click', function() {
    newsItemIndex++;
    if (newsItemIndex >= newsItems.length) {
      newsItemIndex = 0;
    }
    animateNewsScroller();
  });

  // Start the animation
  animateNewsScroller();
  setInterval(animateNewsScroller, 5000); // update every 5 seconds
</script>

This code creates a horizontal news scroller with a list of news items and navigation arrows to move through the list. The news items are displayed inline-block and the navigation arrows are positioned absolutely. The JavaScript code animates the news scroller by translating the container element to the left or right based on the current news item index. The navigation buttons update the news item index and animate the scroller accordingly.

You can adjust the width of the news scroller, the font size and style of the news items, and the animation speed to suit your needs.