- ベストアンサー
scrollable.jsのroop設定について
- scrollable.jsのroop設定に関する質問です。
- scrollable.jsを使って左右に動くアイテムをループさせる方法を教えてください。
- 現在の設定でも問題なく動いていますが、アイテムの部分をループさせたいです。
- ynekoy
- お礼率33% (1/3)
- JavaScript
- 回答数3
- ありがとう数2
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
#1です。 やっぱり circular: true ではないでしょうか？ 最小限にしてみて、こんなので循環すると思いますけれど…？ （英語をちゃんと読むのは大仕事なので、かなり適当です） ＊ 面倒なのでクリックで次を表示の仕様にしています <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="ja"> <head><title>sample</title> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <style type="text/css"> #scrollable { position:relative; overflow:hidden; width:195px; height:195px;} #scrollable .items {position:absolute; width:4000px;} #scrollable .items a {display:block; float:left; width:200px; height:200px; background-color:#ffc; border-right:1px solid #aaa;} </style> <script src="http://cdn.jquerytools.org/1.2.5/full/jquery.tools.min.js?foo"></script> <script type="text/javascript"> <!-- $(function() { $("#scrollable").scrollable({ circular: true }).click(function(){ $(this).data("scrollable").next(); }); }); //--> </script> </head> <body> <div id="scrollable"> <div class="items"> <a>1</a> <a>2</a> <a>3</a> <a>4</a> <a>5</a> <a>6</a> <a>7</a> <a>8</a> <a>9</a> <a>10</a> <a>11</a> <a>12</a> <a>13</a> <a>14</a> <a>15</a> </div> </div> </body> </html>
その他の回答 (2)
- fujillin
- ベストアンサー率61% (1594/2576)
#2です。 サイトの自動リンク機能のために、#2のソースのライブラリ読込みの<script>タグ部分がおかしくなってしまいました。 修正してお読みください。
- fujillin
- ベストアンサー率61% (1594/2576)
試してませんけれど、ご提示のサイトの説明部分に書いてあるような… http://flowplayer.org/tools/scrollable/index.html#configuration 英語が苦手なので斜め読みですが、この（↑）表でみると、オプションで circular: true を設定してあげればよさそうな感じがしますけど。
補足
迅速な回答ありがとうございます。 すみません、circular: trueは試してみたのですがオプションはどこに・どのような文法で記述するのかが分からず…といった感じでした。 ヘッダーに <script type="text/javascript"> $(function() { $("#scrollable").scrollable({ horizontal:true, circular: true }); この様に入れてみたのですが駄目でした。 申し訳ないです…。 }); </script>
お礼
お礼が遅くなってしまって申し訳ありません。 迅速な対応をありがとうございました。 無事上記のソースで出来ました。 もう少し英文の読解力と、javascriptの知識を身に着けるよう努力致します。 ありがとうございました！