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 -->

Open in new window

test-product.gif
jerrrrryAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Eddie ShipmanAll-around developerCommented:
So, do you want it to automatically scroll?
0
jerrrrryAuthor Commented:
yes
0
Eddie ShipmanAll-around developerCommented:
I will download the module and take a look at it tonight.
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

jerrrrryAuthor Commented:
ok thank you
0
Eddie ShipmanAll-around developerCommented:
Looks like all you have to do is remove the mousewheel option from blocknewproducts.js to make it autoscroll.
Or at least that is what the documentation for jCarouselLite says.

What other problems did you have with this module?
0
Eddie ShipmanAll-around developerCommented:
blocknewproducts.js
$(document).ready(function(){
	$(".newproductslide .jCarouselLite").jCarouselLite({
		visible: newproductslide_items_vis,
		vertical: newproductslide_vertical,
		easing: newproductslide_type_effect,
		circular: true,
		auto: newproductslide_time_transition,
		speed: newproductslide_time_effect
	});
});

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Eddie ShipmanAll-around developerCommented:
Do you still need help with this?
0
jerrrrryAuthor Commented:
thanks, i apologize i forgot you
0
Eddie ShipmanAll-around developerCommented:
Did it work like you expected?
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Development

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.