Home » Cool & Future Tech, Featured, Headline, Web Development

How to Add JCarousel Lite to WordPress

10 May 2009 35 Comments
How to Add JCarousel Lite to WordPress

A number of folks have asked for detailed step-by-step instructions so here’s how I added a nice Carousel to the Arthemia theme running under WordPress. I use the free version of the Arthemia theme which doesn’t have a carousel out of the box. It’s easy to add one though and of course these instructions apply regardless of the theme you’re using so here goes.

I’ll assume you have WordPress installed, doesn’t matter which version.

Depending on the theme you use, the pages you’ll need to edit are located in a folder under wp-content/themes/

It’s confusing but there are actually two JCarousel libraries, each different, one being JCarousel and the other being JCarousel Lite. JCarousel is a fully featured robust carousel library for the ultimate in carousel satisfaction. It’s very complicated and I didn’t need its features. I went with JCarousel Lite and I suggest you do too.

Step 1)
Put this code into your theme’s footer.php file:


<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="http://www.gmarwaha.com/jquery/jcarousellite/js/jcarousellite_1.0.1.pack.js" type="text/javascript"></script>

The first is a link to JQuery, the 2nd is a link to JCarousel Lite. You need both and in that order.  You can specify these in the header too but the page will appear to load a little quicker in the browser if JS files are moved to the footer.

2) While you have Footer.php open, add this after the above two lines:


<script type="text/javascript"><!--
$(function() {

$("#MyCarousel").jCarouselLite({
btnNext: ".next",
btnPrev: ".prev",
vertical: true,
visible: 3,
auto:2000,
speed:1000
});
});
// --></script>

The above is just a simple declaration to initialize a carousel. It names 3 divs, MyCarousel, Next and Prev which we’ll create next…

Step 3) Generate the carousel elements. You can make your elements static but where’s the fun in that? I used PHP for this and in my case I scroll between 5 or so “Featured” items. Here’s the PHP for that and this should go in your theme’s index.php file, wherever you want the carousel to show up.


<div id="MyCarousel">
<ul>

<?php query_posts("showposts=5&category_name=Featured"); $i = 1; ?>

<?php while (have_posts()) : the_post(); ?>

<li> <a class="title" rel="bookmark" href="<?php the_permalink() ?>"><?php the_title() ?></a></li>

<?php endwhile; ?>

</ul>
</div>

<div class="prev">&nbsp;</div>
<div class="next">&nbsp;</div>

Basically you’re just creating a div named MyCarousel, inside there is an unordered list (<ul>) and then there’s some PHP to loop through the 5 most recent Featured items and create <li> tags for each one.

You should tailor this to your needs. This code uses a WordPress function to find the latest blog entries but your code can pull data from wherever.

Notice this also creates the necessary div tags, MyCarousel, Next and Prev.

Step 4) Celebrate, you’re done. If everything worked you should get a vertical scrolling carousel on your blog’s home page. With that working you can add in other blog elements like the blog entry excerpt or number of comments etc.

Hope that’s clear enough.

35 Comments »

  • SeanTips said:

    The JCarousel isnt included with the free version. But yours seems to be the Pro version there is the update for that at the Arthemia website.

    Nonetheless the guide above is uncanny and amazing. Two Thumbs up for a job well done.

    ^Tips

  • Francis (author) said:

    Hi SeanTips,
    It’s funny you say that, my version of arthemia is actually the free version, I added the jCarousel Lite myself and tweaked the colors somewhat to look like the $$$ version.

    The pro version I believe comes with a bunch of administrative enhancements which I also don’t have (and don’t miss).

    regards,
    -fs

  • Stefano said:

    Hi Francis, thanks so much for this amazing tutorial!!!
    I try to put it in my Arthemia free version but something goes wrong…!!!

    This is the error:

    Parse error: syntax error, unexpected ‘=’ in /home/stefano1/stefanocareddu.it/prove-wordpress/wp-content/themes/arthemia/index.php on line 32

    What I have to do? Please help me again!!!

    Thanks so much for your help!!!

  • Francis (author) said:

    Stefano you either have the wrong double quotes in your PHP code or the $i=1 is causing a problem. Or something else. Try removing the $i=1 since that is not needed.

  • sürücü kursu said:

    What I have to do? Please help me again!!!

    Thanks so much for your help!!!

  • Mia said:

    Hi!

    Thanks for the tutorial, but I can’t get it to work,
    I placed the codes in several different positions
    without luck :(

    Also made a new .php file only with the code you gave us,
    and it doesn’t work either, the line that gives the problem
    is always this one:

    I removed “$i=1″ but still gives a Parse error: syntax error, unexpected ‘=’ for that line.

    Also could you tell us a good example of which line number
    to insert the code, in the footer and index ?

    I don’t have a lot of coding knowledge as you see.. thanks again !

  • Francis (author) said:

    I’d need to see your header.php, index.php and footer.php. You can email me at fs at francis shanahan dot com and just zip them up and I’ll take a look.

  • Johannes said:

    Hi, great post !

    Could you tell us (the non code savy), where to insert those lines ?
    (line number appreciated)

    I’m getting the same error as Stefano, tried everithing,
    even build an “index9.php” with your code only but still get that error..

    Thanks !

  • rismaka said:

    Hi franciss, Take a look at my arthemia’s modified themes. You can use it, and please don’t remove the credit link on the footer.php. Here is the link download:
    http://www.ziddu.com/download/4913667/arthemia.zip.html

    Now, i called him arthemia freemium. I put the carousel in featured category and sidebar post.
    New feature:
    -Featured carousel
    -Threaded comment enable
    -SEO friendly
    -High performance, and the last,
    -No more “timthumb script”. :)

  • Stefano said:

    Hi Francis, I placed the codes in several different positions, but I can’t get thr carousel to work…!!!

    I also removed “$i=1″ but still gives a Parse error: syntax error, unexpected ‘=’ for that line.

    Can I email to you my header.php, index.php and footer.php files so you can see and maybe fix them?

    Thanks again for your help…!!!

  • pvf said:

    HI Francis,
    thanks for this tutorial!
    really usefull, but i cant seem to make the carousel work….
    i have double and triple checked everything, but nothing is moving…

    the php is:

    image): ?>

    <a href=”” title=””><img src=”image->getThumbnailHref(array(‘w=100′,’fltr[]=usm|30|0.5|3′)) ?>” alt=”” title=”” width=”100″/>

    the js is:
    $(function() {
    $(“#MyCarousel”).jCarouselLite({
    vertical: true,
    visible: 3,
    auto:2000,
    speed:1000
    });
    });

    any input is greatly appreciated!
    thanks!

  • Francis (author) said:

    This doesn’t help me since I’ve no idea what your PHP is doing. The PHP should just produce an HTML unordered list inside a div with the id set to match what you’re calling in the JS (MyCarousel). Paste in your HTML and I can take a look.

  • JC said:

    I have problem using the script too.

    Can I check if the script is indeed as the below? Is there a need for the “”?

    ***********************************************

    ************************************************

    Btw, I have the jcarousellite_1.0.1.pack.js upload to my directory and my header file has this statement.

    <script type=”text/javascript” src=”/wp-content/themes/arthemia/jcarousellite_1.0.1.pack.js”>

    Any advice what is wrong?

    Thanks
    JC

  • Jim Bertucci said:

    Hi Francis,

    Will try this tonight, looks so good. I thought I would pass on this to you. Lesterchan.net has to plugins that are great for articles.

    WP-PRINT

    WP-MAIL.

    If someone wants to print an article or tutorial, just hit that button and the plugin gets it ready.

    Will let you know how it goes tonight.

    JIM

  • Jim Bertucci said:

    Francis,

    2 things:

    1. Does it matter where in the footer the 2 codes go?

    2. When you add the DIV=”my carousel” where you want it to show. Lets take out theme Arthemia. Did you remove all the featured code or just add this? If just added, where in that featured DIV.

    Thanks

    Jim

  • Jim Bertucci said:

    If your post is set to 5 say but you only have 4 in featured, should the script work with just the 4.

    JIM

  • chantal said:

    Hi There

    I have been trying to follow all kinds of instructions to do this, but just cannot get it right.
    My slider won’t slide. Ever. I have the latest wordpress, and am developing my site locally… could this be the problem?

  • kalista said:

    Great tutorial

  • Alexander said:

    Thanks for the help Francis!

    A word to others trying to implement jcarousel according to this tutorial: the quotation marks in the code examples may not parse properly in html. If you’ve done everything by the examples, removed $i=1, and still aren’t getting the slideshow to run, try replacing all the double quotation marks (“) in the copied text with double quotation marks that you type yourself. That made it work for me.

  • Francis (author) said:

    Good point Alexander. I updated the post to use Syntax Highlighter, hopefully that makes the code easier to copy-paste. Enjoy.

  • Rodrigo said:

    Wow have been looking for something like this for a long time!! Thanks a lot!!

    I have one little questions though, i manage to change it to horizontal from vertical but how about styling this with CSS? I’m lost to as what to name some things.. anyone can help?

    Thanks in advance!

    (ps my goal is to get some like what is displayed on the g4tv.com website at the bottom)

  • james said:

    Thanks man! You did a great job posting this! Keep it up!

  • ambar said:

    Good work Francis,
    Thanks for the tutorial but I am facing few problem. The link to the site is http://www.onebillionminds.com/category/next50
    Is there any way you can help me out on this?

    Any help will be greatly appreciated,
    Ambar

  • Julien said:

    Hello,

    Thx for the great tutorial but, to go back to the basis, how do I install Jquery or Jcarousel in order to use this code ?

    Thanks a lot.

  • Francis (author) said:

    just add a script link to your page:

  • Tony said:

    Hello,

    I’ve used your very detailed tutorial, but I have no idea why it’s not working! I’ve followed it step-by-step. Maybe I’m not putting the final piece of code in the right place? I too have the Arthemia free, and I would really like to have an auto-scrolling “Headline” section. Any ideas how to go about that? Any help from anyone would be much appreciated!

  • Ajinkya said:

    thanks, for teh jCarousel.

    I used your Script with this guys function > http://admindaily.com/featured-post-slider-jcarousel-how-to.html

    & i got a superb effect :)

    i cant post my live site cus i hv hosted it on home PC with XAMMP

  • Antonio said:

    There is a bug..

    when i refresh the page this script load all post that you have set (For example 5) with and only after load the exactly post without

    How we can delete this bug? (You also have this problem in your homepage)

    Thank you

  • Ross said:

    Hi,

    I’m having a problem where I’ve managed to get everything sorted but the featured panel appears really small and not the same depth as the headline one – any way I can resolve this?

    Thanks.

  • Manchester Ads said:

    I cant change speed in my site “jcarousellite_1.0.1.pack.js” i would greatly appreciate any help thanks?

  • Francis (author) said:

    You can change the speed by passing in a speed parameter in the initial call.

    From http://gmarwaha.com/jquery/jcarousellite/index.php#doc

    “Specifying a speed will slow-down or speed-up the sliding speed of your carousel. Try it out with different speeds like 800, 600, 1500 etc. Providing 0, will remove the slide effect.”

  • Web Design said:

    Nice tutorial thanks, a couple of times I have had a nightmare trying to integrate this plugin! your method works quick and easy.

  • UmEr said:

    Thnx for this.
    Everything is working fine but the next and pre button don know how its working plz tell me.

  • UmEr said:

    O thnx i resolved it by myself. 😛 Thnx again

  • britain said:

    not .css ??

Leave your response!

Add your comment below, or trackback from your own site. You can also subscribe to these comments via RSS.

Be nice. Keep it clean. Stay on topic. No spam.

You can use these tags:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

This is a Gravatar-enabled weblog. To get your own globally-recognized-avatar, please register at Gravatar.