prestashop product display sliding custumization using jquery

hello i wonder how i can have a sliding display of the new products in prestashop
i ask myself how much products i should display and how to make it technically

surely i should use z-index,?
should i have a block with all the products and move it or call several time the function with different limit value for showing the products?

in my drawing i show 4 products, it is not enough that enough, how much do you think will be necessary?
do you have a idea of what the function would look like? i found on the prestashop forum a module
http://www.maofree-developer.com/coder-webmaster-programmer/templates/maofree/files/carousel/maofree_blocknewproducts.zip but i didn't manage to get it work?


thanks

THIS IS function in blocknewproducts.php

	public function hookRightColumn($params)
	{
		global $smarty;
	
		$newProducts = Product::getNewProducts((int)($params['cookie']->id_lang), 0, (int)(Configuration::get('NEW_PRODUCTS_NBR')));
		if (!$newProducts AND !Configuration::get('PS_BLOCK_NEWPRODUCTS_DISPLAY'))
			return;
		$smarty->assign(array('new_products' => $newProducts, 'mediumSize' => Image::getSize('medium')));

		return $this->display(__FILE__, 'blocknewproducts.tpl');
	}
	
THIS IS  blocknewproducts.tpl

<!-- MODULE Block new products -->
<div id="new-products_block_right" class="block products_block">
	<h4><a href="{$link->getPageLink('new-products.php')}" title="{l s='New products' mod='blocknewproducts'}">{l s='New products' mod='blocknewproducts'}</a></h4>
	<div class="block_content">
	{if $new_products !== false}
		<ul class="product_images clearfix">
		{foreach from=$new_products item='product' name='newProducts'}
			{if $smarty.foreach.newProducts.index < 2}
				<li{if $smarty.foreach.newProducts.first} class="first"{/if}>{$product.name|escape:html:'UTF-8'}<br/><span class="price">{$product.price}</span><a href="{$product.link}" title="{$product.legend|escape:html:'UTF-8'}"><img src="{$link->getImageLink($product.link_rewrite, $product.id_image, 'medium')}" height="{$mediumSize.height}" width="{$mediumSize.width}" alt="{$product.legend|escape:html:'UTF-8'}" /></a>{$product.manufacturer_name}</li>
			{/if}
		{/foreach}
		</ul>
	
	
	
		<dl class="products">
		{foreach from=$new_products item=newproduct name=myLoop}
			<dt class="{if $smarty.foreach.myLoop.first}first_item{elseif $smarty.foreach.myLoop.last}last_item{else}item{/if}"><a href="{$newproduct.link}" title="{$newproduct.name|escape:html:'UTF-8'}">{$newproduct.name|strip_tags|escape:html:'UTF-8'}</a></dt>
			{if $newproduct.description_short}<dd class="{if $smarty.foreach.myLoop.first}first_item{elseif $smarty.foreach.myLoop.last}last_item{else}item{/if}"><a href="{$newproduct.link}">{$newproduct.description_short|strip_tags:'UTF-8'|truncate:50:'...'}</a>&nbsp;<a href="{$newproduct.link}"><img src="{$img_dir}bullet.gif" alt="&gt;&gt;" width="10" height="7" /></a></dd>{/if}
		{/foreach}
		</dl>
		<p><a href="{$link->getPageLink('new-products.php')}" title="{l s='All new products' mod='blocknewproducts'}" class="button_large">{l s='All new products' mod='blocknewproducts'}</a></p>
	{else}
		<p>{l s='No new products at this time' mod='blocknewproducts'}</p>
	{/if}


	
	
	</div>
</div>
<!-- /MODULE Block new products -->

Select allOpen in new window

test-product.gif