jQuery News Ticker with Responsive Layout

Learn how to build jQuery News Ticker with a responsive layout by using the eocNewsticke plugin. It is a simple and lightweight plugin that comes with clean design.

It allows you to generate the horizontal breaking news bar that moves from the right to the left side. You can also list out the latest post or news with animation and make them keep moving.

Such news ticks help you to showcase very important information as user land on your website. Its quite helpful for the users and you can show them important notice.

With the help of CSS and by modifying its js file you can easily customize it. Furthermore, you can customize it by using its available options.

Moreover, you can control scrolling speed, timeout and add divider, etc.

How to Use jQuery Responsive News Ticker

Load the jQuery and eocNewsticker‘s CSS and JavaScript file into your HTML document to create news ticker.

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<link el="stylesheet" href="css/eocnewsticker.css">
<script src="js/eocnewsticker.js"></script>

After that, we will create a div element with a unique id that contains your news/posts links or simple text. In our case, we have a myNews ID.

<div id="myNews">The quick brown fox jumps over the lazy dog</div>

Finally, initialize the plugin in jQuery document ready function to an active news ticker.

$(document).ready(function() {
  $("#myNews").eocNewsticker();
});

Advanced Configuration Options for News Ticker

The following are some advanced configuration options to create/customize “eocNewsticker”

$("#myNews").eocNewsticker({
   speed: 20,
});

$("#myNews").eocNewsticker({
    timeout: 2,
});

$("#myNews").eocNewsticker({
   divider: "|",
});