2011年12月17日土曜日

ブロガー(blogger)にjQueryカルーセルの「CarouFredSel」を設定

ブロガー(blogger)にjQueryカルーセルの「CarouFredSel」を設定してみました。組み込みはオプションを付けなくても、全て自動でこなしてくれて楽です。画像でなくても、リスト要素に収まれば、なんでもメリーゴーランド状態となります。今回はシンプルに文字で試してみました。スピードを調節できると、もっと良いかな? あと、横幅は全て均一のものでないと、デザインが崩れてしまうような気がします。

さて、IEで確認すると、また動作していない(涙)。何が悪いんだろう? IEを利用されている方、ごめんなさい。本家ではIEでも問題なく動作していますので、完全に設定している自分に原因があります。

例1 オプション無し

例2 動作指定のオプションあり

例3 ユーザー入力のオプションあり

Javascript部分のソースはこちら。
<script type="text/javascript" language="javascript">
<!--
$(function() {
   $('#foo0').carouFredSel();
   $('#foo1').carouFredSel({
      padding: '[10, 20, 30, 40]',
      direction: 'right',
      width: '400',
      auto: 'delay',
   });
   $('#foo2').carouFredSel({
      prev: '#prev2',
      next: '#next2',
      pagination: "#pager2",
      auto: false
   });
   $(window).resize();
});
//-->
</script>
HTML部分
<div class="list_carousel">
<ul id="foo0">
   <li>りんご</li>
   <li>みかん</li>
   <li>いちご</li>
   <li>メロン</li>
   <li>もも</li>
   <li>くり</li>
   <li>なし</li>
   <li>かき</li>
   <li>マンゴー</li>
   <li>ぶどう</li>
</ul>
<div class="clearfix"></div>
</div>

0 件のコメント:

コメントを投稿