アイテムベースのスクロールとナビゲーションを実装できる Slyの使い方
Sly http://darsa.in/sly/
HTMLの構造はこうなっている
FRAME、SLIDEE、CONTENT ITEMSの関係を理解する
横スクロールのサンプルページ
http://darsa.in/sly/examples/horizontal.html
このサンプルページのソースを見てみる。
読み込まれているファイルの中で自分で試してみるのに必要なのは、
jquery.js
plugins.js
sly.min.js
horizontal.js
horizontal.css
上3つはSLYを使うための基本的なファイル、
このサンプルでは、オプションの設定を horizontal.js、見た目の設定を horizontal.css で行っている
この中からフレームに1つのアイテムが表示されるサンプル’One item per frame’を以下に抜粋
(上記ファイルはfiles以下に入れている)
<!DOCTYPE html> <html lang="en"><head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>Horizontal examples - Sly</title> <meta name="viewport" content="width=device-width"> <link rel="stylesheet" href="files/horizontal.css"> </head> <body> <div > <div class="wrap" style="width:970px; margin: 0 auto;"> <h2>One item per frame</h2> <div class="scrollbar"> <div style="transform: translateZ(0px) translateX(0px); width: 71px;" class="handle"> <div class="mousearea"></div> </div> </div> <div style="overflow: hidden;" class="frame oneperframe" id="oneperframe"> <ul style="transform: translateZ(0px); width: 18256px;" class="clearfix"> <li class="active"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li> <li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li class="">15</li> </ul> </div> <div class="controls center"> <button disabled="disabled" class="btn prev disabled"><i class="icon-chevron-left"></i> prev</button> <button class="btn next">next <i class="icon-chevron-right"></i></button> </div> </div> </div> <!-- Scripts --> <script src="files/jquery.js"></script> <script src="files/plugins.js"></script> <script src="files/sly.min.js"></script> <script src="files/horizontal.js"></script> </body></html>
horizontal.js 抜粋
FLAMEとして使うオブジェクトの指定やオプションの設定を行っている。
オプション一覧はこちら
https://github.com/Darsain/sly/wiki/Options
// ------------------------------------------------------------- // One Item Per Frame // ------------------------------------------------------------- (function () { var $frame = $('#oneperframe'); var $wrap = $frame.parent(); // Call Sly on frame $frame.sly({ horizontal: 1, itemNav: 'forceCentered', smart: 1, activateMiddle: 1, mouseDragging: 1, touchDragging: 1, releaseSwing: 1, startAt: 0, scrollBar: $wrap.find('.scrollbar'), scrollBy: 1, speed: 300, elasticBounds: 1, easing: 'easeOutExpo', dragHandle: 1, dynamicHandle: 1, clickBar: 1, // Buttons prev: $wrap.find('.prev'), next: $wrap.find('.next') }); }());
horizontal.css 抜粋
/* One Item Per Frame example*/ .oneperframe { height: 300px; line-height: 300px; } .oneperframe ul li { width: 1140px; } .oneperframe ul li.active { background: #333; }
スクロールバーやボタンの見た目もこのCSSで設定しているので、見た目を変えたい時は変更する
始めまして。
Slyの使い方で分からない記述があり、質問させて下さい。
ほぼjQuery初心者なのですが、記述してある通りに実行しても全く動きませんでした。
もちろん他サイトやsly元ソースを閲覧しながら悪戦苦闘したのですが、どうしても駄目でした。※本当に15時間くらい格闘しましたがどうしても駄目なので質問させて下さい。
まず分からなかったのが以下の記述
>jquery.js
>plugins.js
>sly.min.js
>horizontal.js
>horizontal.css
これを何処で手に入れるのか分からなかったので、
サンプルページから一つ一つ探し出して.txtにコピーし
拡張子をそれぞれ.js(又は.css)に直してアップロードし、
各<script src=…へ貼りつけて自サイトのHTMLソースへ記述、
さらに
>この中からフレームに1つのアイテムが表示され…
の11行目から33行目を自サイトのHTMLソースへ記述しました。
これで手順は合っているかと思っていましたが、
当方が間違えているから動かないわけでして、
何処が間違えているか指摘して頂けないでしょうか?
面倒な質問で申し訳ありませんが、よろしくお願いします。
>jquery.js
>plugins.js
>sly.min.js
>horizontal.js
>horizontal.css
「.txtにコピーし」というのがわかりませんが
サンプルページから探し出してコピーする方法で大丈夫です。
jquery.jsはjquery.min.jsからコピーします。
今、再度試したところ動きましたので、
上記のファイルがすべてfiles内にあるのを確認して
11行目から33行目をコピーではなくまず全体をコピーしてやってみてください。
お返事頂きありがとうございます!
ご指摘頂いたとおり、全体をコピーしてやってみました。
が、結果は同じで以下のように何も表示されません。
http://blog.livedoor.jp/testdesuyone/sly/sly-test004.html
何か根本的な事を間違えている気がします。
ご面倒かとは思いますが、上記URLのソースをご確認いただき
ご指導いただけたらと思います。
見ました。
CSSのコロンが抜けているのとコメントアウトができていないようですのでまずはそこを直すと良いと思います。
とても有益な記事をありがとうございます。
123456789
の中身1や2をカスタマイズするには何かルールがあるのでしょうか。
単純な画像リンク()は成功しましたが、やなどが挿入できませんでした。
ご存知でしたらご教授いただければ幸いです。
このコメント欄はタグを記入すると削除されてしまいますので
何が挿入できないのかわかりませんでした。
タグを括弧なしで記入するなど別の方法で教えてください。
了解しました。
coverflow.htmlのul
class=”clearfix”
の中に、li が並んでいます。
そのli の中に現在数字しかありませんが、様々なコンテンツを入れたかったのです。
先日質問した折には、特定の情報が反映されないということを書きましたが、cssの指定を見るとfontの級数がかなり大きく、このため加えた情報が収まりきらなかったようです。
fontのsizeを小さくしたところ、きちんと反映されていました。
お手数かけました。
ありがとうございます。
初めまして。
slyの使い方について質問をさせていただければと思います。
http://darsa.in/sly/examples/horizontal.html
上記ページのサンプル集の中から、「Now I’m just goofing around」を
選んでサンプルとして作成しています。
動作自体は現状問題なく動いているのですが、
そこに追加でリンクを設定しようとしたところで手が止まっています。
サンプルでは中央に配置されたスライドが赤い色で示されていますが、
このスライドをクリックしたときに別ページへ遷移するようにリンクを設定したいのです。
イメージとしては、<li><a href=””>***</a></li>という形ですね。
(上記は全角で表記していますが、実際には半角でコードを書いています)
実際に試してみてはいるのですが、フリック動作?に関わるJSが反応しているのか、Aタグには見向きもしないようです。
(クリック時に追加されるクラスが何か反応してる?)
このあたりのことで、何かご存知であればご教授いただければと思います。
宜しくお願いいたします。
JSFiddleでスライドの0にリンクを設定したものを用意しました。
http://jsfiddle.net/nvfer8gb/3/
これが動かないということでしょうか?
ご返信をいただきありがとうございます。
ご提示いただいたサンプルが、こちらの意図する動きでした。
…と、ここで気づいたのですが、どうやらリンクが動かない!!!というのは、こちらのスペルミスのようでした…。
お騒がせしてしまい、申し訳ございません。。
追記の質問で大変恐縮なのですが、このリンクはliで囲っているすべての要素に設定する予定です。
その場合、中央にきた要素のみ、リンクが動作するようにJSを修正することは可能なのでしょうか?
イメージとしては、liのクラスがactive になっている要素の、aタグのみをlocationさせる…という動作でしょうか。
ご参考までに、お話をお聞かせいただければと思います。
宜しくお願いいたします。
CSSのpointer-events: none;を使うとリンクを無効にできます。
サンプルにCSSを追加しました。
http://jsfiddle.net/nvfer8gb/4/
ご返信ありがとうございます。
JS側ではなく、CSSでの制御が可能なのですね。
ご提示いただいたサンプルの通りにスタイルを追加しましたら、想定していた動作になりました。
「pointer-events」でマウスイベントも制御できるとは…使ったことのないスタイルでしたので、とても勉強になりました。
ありがとうございます。
最後に一つだけ。
こちらのslyですが、IEでは3Dの見え方(奥と手前で斜めになっている状態)が再現されていないのですが、一部のスタイルがIEではサポートされていないから、という解釈で間違っていないでしょうか?
そうだと思います。
CSSのperspective: 800px;を小要素で再度指定するとIE11では再現されるようです。古いブラウザでは再現されないかもしれません。
サンプル
http://jsfiddle.net/nvfer8gb/5/
ご返信、ありがとうございます。
サンプルコードの通りにCSSを修正したところ、IEでも3D動作の再現が確認できました。
ただし、おっしゃる通り古いバージョンでは再現不可になるようです。
(開発ツール上での確認になりますが…)
とはいえ、これでFireFox、IEともに、こちらの求める動作となりました。
自分自身の凡ミスもありますが、ここまで複数のサンプルをご用意くださるなど、とても丁寧に教えていただき、ありがとうございました。