私はflickrを見ていて、上部にあるカルーセルとそれがいかにスムーズに動作するかに気づきました。調べてみると「ゆい」と表示されていますが、YUIのアイテムリストのどこにも見当たりません。
http://www.flickr.com/#yui_3_5_1_3_1354482071640_111
カルーセルがYUIから具体的にどの要素から作られているのか、そしてそれらがどこで利用できるのかを誰かが知っていますか?
助けてくれてありがとう。
私はflickrを見ていて、上部にあるカルーセルとそれがいかにスムーズに動作するかに気づきました。調べてみると「ゆい」と表示されていますが、YUIのアイテムリストのどこにも見当たりません。
http://www.flickr.com/#yui_3_5_1_3_1354482071640_111
カルーセルがYUIから具体的にどの要素から作られているのか、そしてそれらがどこで利用できるのかを誰かが知っていますか?
助けてくれてありがとう。
以下は、HTMLと縮小されたJSソースから私が知ることができることに基づいて私が到達している結論です。
Flickrカルーセルは、YUIコードをほとんど使用せずに、遷移モジュール以外の複雑なコンポーネントを使用せずに記述されています。トランジションは、古いブラウザのアニメーションのフォールバックを提供するために使用されます。CSSトランジションを使用しているため、非常にスムーズです。特に、translate3d()
画像を一方向に移動する場合に非常に効果的です。
クインが言及しているように、ギャラリーカルーセルウィジェットがあります。最近、私はScrollView + ScrollViewPaginatorを使用しており、非タッチデバイスでドラッグイベントを無効にしています。このアプローチは、典型的なカルーセルのように感じるので気に入っていますが、タッチデバイスでのジェスチャーによる画像/ページのフリックもサポートしています。
YUIギャラリーカルーセルを使用して非常に簡単に構築できますYUIギャラリーカルーセル