Home Javascript Create A Vertical Scrolling News Ticker With jQuery and jCarousel Lite

Create A Vertical Scrolling News Ticker With jQuery and jCarousel Lite

News Ticker is a fantastic way to present headlines or minor updates to your readers. The smooth scrolling effect will attract your readers and generate more clicks to your site. I am writing this tutorial as there are readers ask about this after they read my tutorial about content slider.

There are a lot of great tutorials discussing on how to implement news ticker, however most of the tutorials that i found are not really suitable for a beginner. So, i decided to use jQuery and its plugin jCarousel Lite to create a simple yet powerful news ticker.

Why i choose jCarousel Lite? it is because jCarousel Lite is a tiny but powerful plugin. Furthermore, you can easily tweak/configure it to achieve different effects. News ticker is just a sample application for this plugin.

Best Cloud Hosting for Wordpress
Best Cloud Hosting for Wordpress

Let’s start to create our news ticker using jCarousel Lite. Download both jQuery and jCarousel Litebefore we can start.

news-ticker

Step 1

Let’s create a blank index.htm file, and include jQuery and jCarousel Lite. Also, create a blank style.css file for later use.

<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<script src="jquery-latest.pack.js" type="text/javascript"></script>
<script src="jcarousellite_1.0.1c4.js" type="text/javascript"></script>
</head>
</html>

Step 2

In the same document, create a <div> and name it as “newsticker-demo”. Basically, this is the container for the news ticker. We will have another <div> class name “newsticker-jcarousellite”. Remember, this is very important and you will need to use the same class name when you configure jCarousel Lite.

Step 3

In the “newsticker-jcarousellite” <div>, create an <ul> element. Each news will be an individual <li>element. In this example, i had created 6 news, so i will have 6 <li> elements(but i am not going to show all). We will have the thumbnail float to the left, while the title and other information float to the right.

<li>
    <div class="thumbnail">
        <a href="#"><img src="images/1.jpg"></a>
    </div>
    <div class="info">
        <a href="http://www.vladstudio.com/wallpaper/?knight_lady">The Knight and the Lady</a>
        <span class="cat">Category: Illustrations</span>
    </div>
    <div class="clear"></div>
</li>

Step 4

After you created your <li> element, it is the time for us to configure the jCarousel. Under the <head>, add these scripts:

<script type="text/javascript">
$(function() {
$(".newsticker-jcarousellite").jCarouselLite({
        vertical: true,
        visible: 3,
        auto:500,
        speed:1000
    });
});
</script>

The script itself is pretty straight forward. The “auto:500″ means it will auto-scroll every 500ms. There are a lot of options which you can configure easily. Refer the documentation for more information.

Best Cloud Hosting for Wordpress
Best Cloud Hosting for Wordpress

Step 5

Basically you had done everything, except styling your content. So, just copy and paste the scripts below in your style.css file.

* { margin:0; padding:0; }

#newsticker-demo {
width:310px;
background:#EAF4F5;
padding:5px 5px 0;
font-family:Verdana,Arial,Sans-Serif;
font-size:12px;
margin:20px auto;
}

#newsticker-demo a { text-decoration:none; }
#newsticker-demo img { border: 2px solid #FFFFFF; }

#newsticker-demo .title {
text-align:center;
font-size:14px;
font-weight:bold;
padding:5px;
}

.newsticker-jcarousellite { width:300px; }
.newsticker-jcarousellite ul li{ list-style:none; display:block; padding-bottom:1px; margin-bottom:5px; }
.newsticker-jcarousellite .thumbnail { float:left; width:110px; }
.newsticker-jcarousellite .info { float:right; width:190px; }
.newsticker-jcarousellite .info span.cat { display: block; font-size:10px; color:#808080; }

.clear { clear: both; }

Must Read

How Much Does It Cost to Build an App in 2019

Software application building is one of the fastest growing fields for over one decade now. The major mobile app stores like Google Play and...

Reasons Why We Give Importance to Visual Content

Take a look online and you’ll find it difficult to locate a web page that doesn’t have an image attached to it unless you’re...

How to Organize Your WordPress Website Better

The best feeling is having a clean website, especially when you started on a clean slate when installing WordPress. Many times, content creators may...

Magento 2 vs WordPress WooCommerce – Which Is the Best Ecommerce Platform for Your Business?

Nowadays, building e-commerce is more comfortable than never before thanks to e-commerce platforms. The only hard part of starting is choosing the best platform...

Why You Should Choose Managed WordPress Hosting

If you're competing on the internet and chosen WordPress as your content management system, you have an important decision to make. Are you going...
Load WordPress Sites in as fast as 37ms!Create A Vertical Scrolling News Ticker With jQuery and jCarousel Lite 1