おすすめ商品を横並び(スライダー)で表示

左右スライダーによるおすすめ商品の表示に関する健忘録

トップページタグに上部にお決まりの・・・

<!–[if IE 6]><link rel=”stylesheet” type=”text/css” href=”*****/css/ie6.css” /><![endif]–>
<!–[if IE 7]><link rel=”stylesheet” type=”text/css” href=”*****/css/ie7.css” /><![endif]–>
<!–[if IE 8]><link rel=”stylesheet” type=”text/css” href=”*****/css/ie8.css” /><![endif]–>
<script src=”*****/js/jquery.mousewheel.min.js” type=”text/javascript”></script>
<script src=”*****/js/jquery.easing.1.3.min.js” type=”text/javascript”></script>
<script src=”*****/js/jquery.sliderkit.1.8.min.js” type=”text/javascript”></script>
<script type=”text/javascript”>
 $(window).load(function(){ //$(window).load() must be used instead of $(document).ready() because of Webkit compatibility    
 // Carousel > Continuous
  $(“.carousel-continuous”).sliderkit({
   auto:false,
   circular:false,
   shownavitems:5,
   scroll:1,
   navcontinuous: true,
   scrollspeed: 700,
   scrolleasing: “linear”
  });
 }); 
</script>
続いて該当箇所に…
<code>
<!– おすすめ商品 –>
<div id=”recommendslider”>
<div>
 <div>
   <div>
    <ul>
<{section name=num loop=$recommend}>
<li>
  <div>
   <div align=”center”>
   <{if $recommend[num].img_url != “”}>
   <a href=”<{$recommend[num].link_url}>”><img src=”<{$recommend[num].img_url}>” alt=”” /></a>
   <{else}>
   <a href=”<{$recommend[num].link_url}>”><img src=”http://img.shop-pro.jp/tmpl_img/31/now_s.gif” alt=”” /></a>
   <{/if}>
    <div style=”width:157px; overflow:hidden;”>
    <a href=”<{$recommend[num].link_url}>”><{$recommend[num].name}></a>
    </div>
    <div>
    <{if $members_login_flg == true && $recommend[num].discount_flg == true}>
    <!– 通常販売価格 –>
    <p><{$recommend[num].regular_price}></p>
    <{/if}>
    <!– 販売価格 –>
    <p><{$recommend[num].price}></p>
    <{if $members_login_flg == true && $recommend[num].discount_flg == true}>
    <!– 割引率 –>
    <p><{$recommend[num].discount_rate}>OFF!!</p>
    <{/if}>
    </div>
   </div>
  </div>
<!– 4個で改行(最後は含まない) –>
  <{if $smarty.section.num.iteration % 4 == 0 and $smarty.section.num.last == false}>
  <br style=”clear:both;” />
  <{/if}>
</li>
<{/section}>
    </ul>
   </div>
  <div><a href=”#” title=”Scroll to the left”><span>Previous</span></a></div>
  <div><a href=”#” title=”Scroll to the right”><span>Next</span></a></div>
 </div>
</div>
</div><!– #recommendslider –>
<!– //おすすめ商品 –>
</code>

そしてCSSはこんな感じで…(要調整)
<code>/*———————————
 *  Slider kit
 *———————————*/
.sliderkit,
.customtabs{margin:10px 0;}
#page .sliderkit ul,
#page .customtabs ul{margin:0;}

.sliderkit .sliderkit-nav-clip a:active{color:#fff}
.sliderkit .sliderkit-nav-clip a:hover{text-decoration:none;}
.tabs-standard .sliderkit-nav-clip li.sliderkit-selected a:active,
.tabs-noheight .sliderkit-nav-clip li.sliderkit-selected a:active{color:#000}
.tabs-standard .sliderkit-nav-clip a:hover,
.tabs-noheight .sliderkit-nav-clip a:hover{color:#fff}

#page .tabs-menu .sliderkit-panel{position:relative;}
#page .tabs-menu .sliderkit-panel-body{width:550px;}
#page .tabs-menu .sliderkit-panel .supertoc{position:absolute;width:180px;right:0;top:30px;}

/*———————————
 *  Carousel > Continuous
 *———————————*/
.carousel-continuous{width:570px;height:84px;}

/* Navbar */
.carousel-continuous .sliderkit-nav{left:0;bottom:0;width:550px;height:64px;padding:10px;background:#ccc;}
.carousel-continuous .sliderkit-nav-clip ul li{float:left;margin:0 5px 0 0;}
.carousel-continuous .sliderkit-nav-clip ul li a{display:block;width:96px;height:64px;overflow:hidden;margin:0;opacity:0.8;}
.carousel-continuous .sliderkit-nav-clip ul li a:hover{opacity:1;}

/* Navbar buttons */
.carousel-continuous .sliderkit-nav .sliderkit-nav-btn{position:absolute;top:0;}
.carousel-continuous .sliderkit-nav .sliderkit-nav-btn span{display:none;}
.carousel-continuous .sliderkit-nav .sliderkit-nav-btn a{display:block;width:15px;height:84px;background:transparent url(“../images/arrows-h.png”) no-repeat center 0;}
.carousel-continuous .sliderkit-nav .sliderkit-nav-prev{left:10px;}
.carousel-continuous .sliderkit-nav .sliderkit-nav-next{right:10px;}
.carousel-continuous .sliderkit-nav .sliderkit-nav-prev a{background-position:-89px center;}
.carousel-continuous .sliderkit-nav .sliderkit-nav-next a{background-position:-108px center;}
.carousel-continuous .sliderkit-nav .sliderkit-nav-prev a:hover,
.carousel-continuous .sliderkit-nav .sliderkit-nav-prev a:focus{background-position:-126px center;}
.carousel-continuous .sliderkit-nav .sliderkit-nav-next a:hover,
.carousel-continuous .sliderkit-nav .sliderkit-nav-next a:focus{background-position:-145px center;}

/* Buttons > Disable */
.carousel-continuous .sliderkit-nav .sliderkit-btn-disable{opacity:0.3/*can be set to any value until 1*/;cursor:default;}

/*
 *  PLUGIN BASICS
 *  ————————————————
 */
.sliderkit{display:none;position:relative;overflow:hidden;text-align:left;}
.sliderkit a,
.sliderkit a:hover{text-decoration:none;}
.sliderkit a:focus{outline:1px dotted #000;/*optional*/}
.sliderkit img{border:0;}

/*———————————
 *  Navigation
 *———————————*/
.sliderkit .sliderkit-nav{z-index:10;position:absolute;text-align:center;}

/* Nav > Clip */
.sliderkit .sliderkit-nav-clip{position:relative;overflow:hidden;margin:0 auto;}
.sliderkit .sliderkit-nav-clip ul{position:relative;left:0;top:0;list-style:none;margin:0;padding:0;}
.sliderkit .sliderkit-nav-clip ul li{float:left;}
.sliderkit .sliderkit-nav-clip ul li a{display:block;overflow:hidden;}

/*———————————
 *  Buttons
 *———————————*/
.sliderkit .sliderkit-btn{z-index:10;}

/*———————————
 *  Panels
 *———————————*/
.sliderkit .sliderkit-panel{z-index:1;position:absolute;overflow:hidden;}
.sliderkit .sliderkit-panel-active{z-index:5;}
.sliderkit .sliderkit-panel-old{z-index:4;}

/* Panels > Overlay */
.sliderkit .sliderkit-panel .sliderkit-panel-textbox{position:absolute;z-index:1;}
.sliderkit .sliderkit-panel .sliderkit-panel-text{position:absolute;z-index:3;top:0;left:0;}
.sliderkit .sliderkit-panel .sliderkit-panel-overlay{position:absolute;z-index:2;top:0;left:0;}

/*———————————
 *  Counter
 *———————————*/
.sliderkit .sliderkit-count{position:absolute;top:5px;right:5px;z-index:10;padding:5px;color:#fff;background:#000;}

/*———————————
 *  Loader
 *———————————*/
.sliderkit .sliderkit-timer{position:absolute;top:0;left:0;z-index:10;height:3px;background:#ccc;}
/* This code can be reduced and pasted in any other CSS file :

Here is a compact version :
——————————-

.sliderkit{display:none;position:relative;overflow:hidden;text-align:left;}
.sliderkit a,
.sliderkit a:hover{text-decoration:none;}
.sliderkit a:focus{outline:1px dotted #000;}
.sliderkit img{border:0;}
.sliderkit .sliderkit-nav{z-index:10;position:absolute;text-align:center;}
.sliderkit .sliderkit-nav-clip{position:relative;overflow:hidden;margin:0 auto;}
.sliderkit .sliderkit-nav-clip ul{position:relative;left:0;top:0;list-style:none;margin:0;padding:0;}
.sliderkit .sliderkit-nav-clip ul li{float:left;}
.sliderkit .sliderkit-nav-clip ul li a{display:block;overflow:hidden;}
.sliderkit .sliderkit-btn{z-index:10;}
.sliderkit .sliderkit-panel{z-index:1;position:absolute;overflow:hidden;}
.sliderkit .sliderkit-panel-active{z-index:5;}
.sliderkit .sliderkit-panel-old{z-index:4;}
.sliderkit .sliderkit-panel .sliderkit-panel-textbox{position:absolute;z-index:1;}
.sliderkit .sliderkit-panel .sliderkit-panel-text{position:absolute;z-index:3;top:0;left:0;}
.sliderkit .sliderkit-panel .sliderkit-panel-overlay{position:absolute;z-index:2;top:0;left:0;}
.sliderkit .sliderkit-count{position:absolute;top:5px;right:5px;z-index:10;padding:5px;color:#fff;background:#000;}
.sliderkit .sliderkit-timer{position:absolute;top:0;left:0;z-index:10;height:3px;background:#ccc;}
*/
</code>

で、肝心なJSは、下記を導入。。。
jquery.mousewheel.min.js
jquery.easing.1.3.min.js
jquery.sliderkit.1.8.min.js

こんな感じでOK!

そんでもって使用したスクリプトは

http://www.kyrielles.net/sliderkit/demos/carousels.html

の、Continuous carouselって言うやつ。。。

コメントをどうぞ