News ticker html code

Here is an example of HTML code for a news ticker:

<!-- News Ticker HTML Code -->

<!-- Container for the news ticker -->
<div id="news-ticker" style="width: 500px; height: 30px; overflow: hidden; background-color: #f0f0f0; padding: 10px; border: 1px solid #ccc; border-radius: 5px; box-shadow: 0 0 10px rgba(0,0,0,0.2);">

  <!-- News items container -->
  <ul id="news-items" style="list-style: none; margin: 0; padding: 0;">

    <!-- News item template -->
    <li style="display: inline-block; margin-right: 10px;">
      <span style="font-weight: bold; font-size: 16px; color: #333;">{{title}}</span>
      <span style="font-size: 14px; color: #666;">{{description}}</span>
    </li>

  </ul>

  <!-- News ticker controls -->
  <div id="news-ticker-controls" style="text-align: right; padding: 10px;">
    <button id="prev-button" style="background-color: #4CAF50; color: #fff; border: none; padding: 10px 20px; font-size: 16px; cursor: pointer;">Previous</button>
    <button id="next-button" style="background-color: #4CAF50; color: #fff; border: none; padding: 10px 20px; font-size: 16px; cursor: pointer;">Next</button>
  </div>

</div>

<!-- JavaScript code to animate the news ticker -->
<script>
  // Get the news items container and the news ticker controls
  var newsItems = document.getElementById('news-items');
  var prevButton = document.getElementById('prev-button');
  var nextButton = document.getElementById('next-button');

  // Set the initial news item index
  var currentIndex = 0;

  // Animate the news ticker
  function animateTicker() {
    // Get the current news item
    var currentItem = newsItems.children[currentIndex];

    // Animate the news item
    currentItem.style.transform = 'translateX(0)';
    currentItem.style.transition = 'transform 0.5s ease-in-out';

    // Update the current index
    currentIndex = (currentIndex + 1) % newsItems.children.length;

    // Set the next news item as the current item
    currentItem = newsItems.children[currentIndex];

    // Animate the next news item
    currentItem.style.transform = 'translateX(-100%)';
    currentItem.style.transition = 'transform 0.5s ease-in-out';

    // Call the animateTicker function again after 5 seconds
    setTimeout(animateTicker, 5000);
  }

  // Start the animation
  animateTicker();

  // Add event listeners to the news ticker controls
  prevButton.addEventListener('click', function() {
    currentIndex = (currentIndex - 1 + newsItems.children.length) % newsItems.children.length;
    animateTicker();
  });

  nextButton.addEventListener('click', function() {
    currentIndex = (currentIndex + 1) % newsItems.children.length;
    animateTicker();
  });
</script>

This code creates a news ticker with a container element that holds the news items and controls. The news items are displayed as a list of inline-block elements, and the controls allow the user to navigate through the news items.

The JavaScript code animates the news ticker by translating the news items horizontally and updating the current index. The animation is triggered by a timer that calls the animateTicker function every 5 seconds. The function also updates the current index and sets the next news item as the current item.

You can customize the appearance and behavior of the news ticker by modifying the HTML and CSS code. You can also add more news items to the list by adding more li elements to the news-items container.

Note that this is just an example code, and you may need to modify it to fit your specific use case.