News ticker html code free

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 that displays a list of news items with a title and description. The news items are animated to slide in from the right and slide out to the left. The user can use the previous and next buttons to navigate through the news items.

You can customize the appearance and behavior of the news ticker by modifying the CSS styles and JavaScript code.

Note: This is just an example code and you will need to modify it to fit your specific needs. You will also need to add the news items data to the HTML code using JavaScript or another programming language.