Help with JCarousel? Hiding some items?

[peck3277]

Hi guys I'm hoping someone can help me out here. I am using the JCarousel plugin on a site im building.

I have it installed and I am using 2 buttons to hide some of the carousels items. I am using the following code to do so:

<script type="text/javascript">
				function toggleview_specials(){
					var b = document.getElementsByTagName('li')
					
					for(var i = 1; i < b.length; i++)
					if(b[i].getAttribute('tag') == "carousel_list_best"){
						b[i].style.display = "none"
					}
					for(var i = 1; i < b.length; i++)
					if(b[i].getAttribute('tag') == "carousel_list_specials"){
						b[i].style.display = "block"
					}
				}
				
				function toggleview_offers(){
					var b = document.getElementsByTagName('li')
					
					for(var i = 1; i < b.length; i++)
					if(b[i].getAttribute('tag') == "carousel_list_specials"){
						b[i].style.display = "none"
					}	
					for(var i = 1; i < b.length; i++)
					if(b[i].getAttribute('tag') == "carousel_list_best"){
						b[i].style.display = "block"
					}
				}
			</script>

<div class="carousel">
					<ul id="mycarousel" class="jcarousel-skin-tango">
						<li id="carousel_best_selling1" tag="carousel_list_specials"><a href="#" class="product_list"><div class="item_container"><div class="item_desc">Anabolic Halo</div><img src="images/product_images/test.gif" class="carousel" /><div class="item_old_price">Was €12.99</div><div class="item_new_price">Now €9.99</div></div></a></li>
						<li id="carousel_best_selling2" tag="carousel_list_specials"><a href="#" class="product_list"><div class="item_container"><div class="item_desc">Anabolic Halo</div><img src="images/product_images/test.gif" class="carousel" /><div class="item_old_price">Was €12.99</div><div class="item_new_price">Now €9.99</div></div></a></li>
						<li id="carousel_best_selling3" tag="carousel_list_specials"><a href="#" class="product_list"><div class="item_container"><div class="item_desc">Anabolic Halo</div><img src="images/product_images/test.gif" class="carousel" /><div class="item_old_price">Was €12.99</div><div class="item_new_price">Now €9.99</div></div></a></li>
						<li id="carousel_best_selling4" tag="carousel_list_specials"><a href="#" class="product_list"><div class="item_container"><div class="item_desc">Anabolic Halo</div><img src="images/product_images/test.gif" class="carousel" /><div class="item_old_price">Was €12.99</div><div class="item_new_price">Now €9.99</div></div></a></li>
						<li id="carousel_best_selling5" tag="carousel_list_specials"><a href="#" class="product_list"><div class="item_container"><div class="item_desc">Anabolic Halo</div><img src="images/product_images/test.gif" class="carousel" /><div class="item_old_price">Was €12.99</div><div class="item_new_price">Now €9.99</div></div></a></li>
					
						<li id="carousel_special_offers1" tag="carousel_list_best"><a href="#" class="product_list"><div class="item_container"><div class="item_desc">Darragh Tester</div><img src="images/product_images/test.gif" class="carousel" /><div class="item_old_price">Was €12.99</div><div class="item_new_price">Now €9.99</div></div></a></li>
						<li id="carousel_special_offers2" tag="carousel_list_best"><a href="#" class="product_list"><div class="item_container"><div class="item_desc">1Anabolic Halo</div><img src="images/product_images/test.gif" class="carousel" /><div class="item_old_price">Was €12.99</div><div class="item_new_price">Now €9.99</div></div></a></li>
						<li id="carousel_special_offers3" tag="carousel_list_best"><a href="#" class="product_list"><div class="item_container"><div class="item_desc">2Anabolic Halo</div><img src="images/product_images/test.gif" class="carousel" /><div class="item_old_price">Was €12.99</div><div class="item_new_price">Now €9.99</div></div></a></li>
						<li id="carousel_special_offers4" tag="carousel_list_best"><a href="#" class="product_list"><div class="item_container"><div class="item_desc">3Anabolic Halo</div><img src="images/product_images/test.gif" class="carousel" /><div class="item_old_price">Was €12.99</div><div class="item_new_price">Now €9.99</div></div></a></li>
						<li id="carousel_special_offers5" tag="carousel_list_best"><a href="#" class="product_list"><div class="item_container"><div class="item_desc">4Anabolic Halo</div><img src="images/product_images/test.gif" class="carousel" /><div class="item_old_price">Was €12.99</div><div class="item_new_price">Now €9.99</div></div></a></li>
					</ul>
				</div>

It works as I had hoped and it hides the items. However now the buttons to scroll the navigation scroll too far. I was wondering if anyone could help me figure out a solution to this?

Thanks guys