flickGal - soyjoynice @ ウィキ

http://stakam.net/jquery/flickgal/


・親＝コンテナ
　・子＝コンテナインナー
　　・孫＝アイテム
　　・孫＝アイテム
　　　　:

となっていて、
●親、子
　…オーバーフローした部分＝隠す
　　高さは一緒

●子
　…横長い
　　-webkit-transform で3Dの変形

●孫
　…左寄せ


【HTML】
<section>
    <div class="containerOuter">
        <div class="container">
            <div class="containerInner">　…横長の部分
                <p class="item">ほげほげ　その１</p>
                <p class="item">ほげほげ　その２</p>
                <p class="item">ほげほげ　その３</p>
                <p class="item">ほげほげ　その４</p>
            </div>    
        </div>
    </div>
</section>

【CSS】
.container {
    overflow: hidden;
    height: 280px;
}

.containerInner {
    position: relative;
    overflow: hidden;
    top: 0;
    left: 0;
    width: 1500px;
    height: 280px;
    -webkit-transform: translate3d(240px, 0, 0);
}

.item {
    float: left;
}

【HTMLの中に直書きするstyleとscript】
<style>
.flickBox .moving {
  -webkit-transition: -webkit-transform .2s ease-out;
  -moz-transition: -moz-transform .2s ease-out;
}
</style>

<script>
head.ready('jquery', function () {
  head.js('/jquery/flickgal/jquery.flickgal.min.js', function () {
    $(function () {
      $('.flickBox').not('#slideShow').flickGal();
      $('#slideShow').flickGal({ lockScroll: false });
    });
  });
});  
</script>

* * *
公式：
http://d.hatena.ne.jp/piglovesyou/20110123/1295786690

デモ：
http://stakam.net/jquery/flickgal/demo