jQueryのダウンロードとアップロード

まずはjcarousellite.jsというものが必要になるので、ダウンロードしましょう。

jcarouselliteダウンロード先

海外サイトに拒絶反応が出る人は、次のようにやってみましょう。
ページのVersionの一番上の新しいやつの右端。
(Packed)のリンク部分で右クリックし、名前をつけてリンク先を保存。
名前はもともとついているので、変更しない。

以上でダウンロードできたと思います。

次に/html/jsのディレクトリにさっきのものをアップロード。

これで第一段階終了。

recommend.tplを改良

/data/Smarty/templates/default/frontparts/bloc/recommend.tpl

<!-- //////////////////////////////////// script //////////////////////////////////// -->
<script type="text/javascript">
		$(function() {
			$(".jCarouselLite").jCarouselLite({
				btnNext: ".next",
				btnPrev: ".prev",
				visible : 4,
				speed: 300,
				easing: "linear"
			});
		});
</script>
<!-- //////////////////////////////////// script //////////////////////////////////// -->

<!--{if count($arrBestProducts) > 0}-->
    <div class="bloc_outer clearfix">
        <div id="recommend_area">
            <h2><img src="<!--{$TPL_URLPATH}-->img/title/tit_bloc_recommend.jpg" alt="*" class="title_icon" /></h2>

<div class="carousel">
	<a href="#" class="prev"></a>
	<a href="#" class="next"></a>
	<div class="jCarouselLite">
		<ul style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; position: relative; list-style-type: none; z-index: 1; width: 2880px; left: -800px; ">


<!-- //////////////////////////////////// Panel 1 //////////////////////////////////// -->
        
                <!--{foreach from=$arrBestProducts item=arrProduct name="recommend_products"}-->
			<li>
                    <div class="product_item clearfix">
                        <div class="productImage">
                            <a href="<!--{$smarty.const.P_DETAIL_URLPATH}--><!--{$arrProduct.product_id|u}-->">
                                <img src="<!--{$smarty.const.ROOT_URLPATH}-->resize_image.php?image=<!--{$arrProduct.main_list_image|sfNoImageMainList|h}-->&amp;width=80&amp;height=80" alt="<!--{$arrProduct.name|h}-->" />
                            </a>
                        </div>
                        <div class="productContents">
                            <h3>
                                <a href="<!--{$smarty.const.P_DETAIL_URLPATH}--><!--{$arrProduct.product_id|u}-->"><!--{$arrProduct.name|mb_truncate:19:"..."}--></a>
                            </h3>
                            <p class="sale_price">
                                価格： <span class="price"><!--{$arrProduct.price02_min|sfCalcIncTax:$arrInfo.tax:$arrInfo.tax_rule|number_format}--> 円</span>
                            </p>
                            <p class="mini comment"><!--{$arrProduct.comment|mb_truncate:19:"..."|nl2br}--></p>
                        </div>
                    </div>
                    <!--{if $smarty.foreach.recommend_products.iteration % 2 === 0}-->
                        <div class="clear"></div>
                    <!--{/if}-->
              </li>
                <!--{/foreach}-->
<!-- //////////////////////////////////// Panel 1 //////////////////////////////////// -->

        </ul>
</div>
</div>


        </div>
    </div>
<!--{/if}-->
<script type="text/javascript" src="<!--{$smarty.const.ROOT_URLPATH}-->js/jcarousellite_1.0.1.pack.js"></script>

丸々上記のものに書き換えてみてください。おそらく、動くかと思います。
見た目がぐずぐずなので、動かしようもないでしょうが。

CSSで成形

形をCSSで整えます。

.carousel {
	margin: 0px;
	position: relative;
	width: 566px;
	.slider-wrap:center;
    border: solid 1px #ccc;
    border-top: none;
    padding:5px;
    font-size:90%;
}

.jCarouselLite { 
	position: relative;
	overflow: hidden;
	margin: auto; 
	padding-top:5px;
}

.jCarouselLite li {
    float: left;
    height: 160px;
    overflow: hidden;
    width: 121px;
    text-align:center;
    padding-right:10px;
}

.prev {
float: left;
margin: 55px 2px 0 0;
width: 17px;
height: 17px;
background: url(../img/button/btn_minus.jpg) no-repeat;
cursor: pointer;
}

.next {
float: right;
margin: 55px 0 0 2px;
width: 17px;
height: 17px;
background: url(../img/button/btn_plus.jpg) no-repeat;
cursor: pointer;
}

以下の画像のようになればほぼ完成なのですが、いかがでしょう？

まとめ

あとは微調整、微調整です。
テスト環境ならば、数値をいじって変化を楽しんでも良いですし、自由です。

こちら、デザインをそれっぽくすればamazonなわけですが、いずれやりたいです。

注意点としては、jQueryが上手くうごくかどうかですね。
アップロード場所を間違えないようにして下さい。

というわけで以上です。