Mobile-friendly News Ticker with jQuery and CSS3 - Responsive Ticker

Responsive Ticker is a lightweight jQuery plugin used to create a fully responsive news ticker on the webpage that works perfectly on both desktop and mobile devices.

Features:

• Scroll through a list of news vertically and horizontally.
• Auto convert between horizontal and vertical layouts based on the screen size.
• Pause auto-scroll on mouse hover.

How to use it:

1. Load the stylesheet ticker.css in the head that will provide the basic CSS styles for the news ticker.

<link rel="stylesheet" href="ticker.css">

2. Build the html structure for the news ticker.

<div class="ticker-container">
  <div class="ticker-caption">
    <p>Breaking News</p>
  </div>
  <ul>
    <div>
      <li><span>Breaking News 1 &ndash; <a href="#">read more</a></span></li>
    </div>
    <div>
      <li><span>Breaking News 2 &ndash; <a href="#">read more</a></span></li>
    </div>
    <div>
      <li><span>Breaking News 3 &ndash; <a href="#">read more</a></span></li>
    </div>
    <div>
      <li><span>Breaking News 4 &ndash; <a href="#">read more</a></span></li>
    </div>
    <div>
      <li><span>Breaking News 5 &ndash; <a href="#">read more</a></span></li>
    </div>
  </ul>
</div>

3. Load the ticker.js script after jQuery library but before the closing body tag. That's it.

<script src="/path/to/jquery.min.js"></script> 
<script src="ticker.js"></script>

---

This awesome jQuery plugin is developed by sburtenshaw. For more Advanced Usages, please check the demo page or visit the official website.