[jQuery]flickSimpleプラグインの導入

スマホでよく見かけるflickバナー。

これを手軽に実装する手立てはないかとぐぐったら、jQuery.flickSimpleという素敵なプラグインを発見したので、使い方を勉強しますた。

jQuery.flickSimple.jsをGithubからダウンロード。

#flick {
  width: 100%;
  max-width:690px;
  position: relative; /* IE6・7の overflowバグ回避 */
  overflow: hidden; /* JavaScript無効時にスクロール表示させたいから */
}

#flick ul {
  display: block;
  width: 1000%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

#flick ul li {
  float: left;
  list-style-type: none;
  width: 100%;
  max-width:690px;
  height:100px
}

<div id="flick">
  <ul>
    <li style="background-color:red;">1</li>
    <li style="background-color:blue;">2</li>
    <li style="background-color:yellow;">3</li>
    <li style="background-color:green;">4</li>
  </ul>
</div>

jQuery(function($){
  var nLen = $('#flick > ul > li').length;

  $('#flick > ul').css({
    width:(100*nLen) + '%'
  });

  $('#flick').flickSimple({
    snap: 'first',
  });
  
});

JavaScriptで動的にwidthの設定をしているのですが、逆にこの処理がないと、#flick > ulが1000%となっているため、適切に処理をしてくれないようです。

それにしても便利だなー、このプラグイン。