The Ultimate Managed Hosting Platform
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

The 5 Best Email Marketing Tools for Ecommerce This 2019

Operating an eCommerce store has unique challenges that not all email platforms address equally. That's why it is vital to choose an email marketing...

5 Website Design Tips That Will Make Your Business Boom

When designing a website, take careful precision to dedicate as much time to every facet as possible. Consider the user, consider the pathways they...

Would Product Visualisation Help Your Company?

If you’re running a company, there’s no doubt you’ve thought about how you can best present your products and services to the customer.That’s the...

10 Actionable Tips to Improve the Speed of your WordPress Website

Page speed is an important issue for website users. Pages that load fast can help to decrease bounce rate, improve user experience and improve...

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...
Load WordPress Sites in as fast as 37ms!Create A Vertical Scrolling News Ticker With jQuery and jCarousel Lite 1