Change content of jQuery carousel dynamically

I am trying to do something similar to this: http://www.amazon.com/Black-Friday-After-Thanksgiving-Sale/b/ref=nav_swm_thd?ie=UTF8&node=384082011&pf_rd_p=499992511&pf_rd_s=nav-sitewide-msg&pf_rd_t=4201&pf_rd_i=navbar-4201&pf_rd_m=ATVPDKIKX0DER&pf_rd_r=0642T42GTS6J8H2JKMEF

If the link does not work, go on Amazon, click on the "top holiday deals" link on the top right corner. I am trying to create a similar horizontal scrolling, or "carousel", with a drop-down to change the category, like they have.

I've looked at this example: http://sorgalla.com/jcarousel/

Which works fine except for the drop-down feature. First off, I see that this script has not been updated since 2008-04-07. Is it still good to use it? Any better suggestion?

I've been trying to do the drop-down feature. Here is what I've tried so far:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="/styles/jcarousel/jquery.jcarousel.css">
<script type="text/javascript" src="/scripts/jquery-1.3.2.min.js"></script> 
<script type="text/javascript" src="/scripts/jquery.jcarousel.pack.js"></script> 
<link rel="stylesheet" href="/styles/jcarousel/skins/tango/skin.css">  
<title>Untitled Document</title>

<script type="text/javascript">
jQuery(document).ready(function() {
    jQuery('#mycarousel').jcarousel();
});
</script>
<script type="text/javascript">
function toggleCategory(){  
    jQuery('#mycarousel').empty();
    jQuery('#mycarousel').append("<li>1 byebye</li>");
    jQuery('#mycarousel').append("<li>2 byebye</li>");
    jQuery('#mycarousel').append("<li>3 byebye</li>");
    jQuery('#mycarousel').append("<li>4 byebye</li>");
    jQuery('#mycarousel').append("<li>5 byebye</li>");
    jQuery('#mycarousel').append("<li>6 byebye</li>");
    jQuery('#mycarousel').jcarousel();
}
</script>
</head>

<body>

<a href="#" onclick="toggleCategory();">Switch</a>

<ul id="mycarousel" class="jcarousel-skin-tango">
   <li>1 hello</li>
   <li>2 hello</li>
   <li>3 hello</li>
   <li>4 hello</li>
</ul>


</body>
</html>

Interestingly, it does replace the content with the new content as soon as I click "switch", however it only shows 4 items, because the original carousel has 4 items. I don't think I'm doing it the right way.

ansaurus

tags:

views:

answers:

Change content of jQuery carousel dynamically

related questions