課題内容: 複数のバナーを順番に、一定時間毎に切り替えて表示するウィジェットを作って下さい。 ● デザインは ui_sample.png を参照して下さい。 ● 下記の条件・仕様に従って、imgフォルダ内の画像を使用し、可能なところまで作成 して下さい。 ● 画像が用意されていない部分については、CSSで表現して下さい。 ● 実際に作成するのは横幅 320pxです。(画像素材は倍サイズになっています。) ● 同ページ内に複数設置することを想定して下さい。
最低条件: ● 特定のライブラリに依存しない。 ● Safari(PC)で動作する。
追加条件: ● ライブラリ化して使い回せるようにする。 ● iOS, Android で動作する。
仕様:
- 一定時間(デフォルト値:3000ms)毎に、バナーを左にスクロールして切り替える。 ● スクロールアニメーションはCSSで書く。 ● バナー数は増減することがあることを想定する。 ● バナーをクリック(タップ)したら設定したURLに遷移する。
- バナーの左右に設置したボタンをクリック(タップ)したら、1つずつ前後に移動す る。
- バナーの下部に配置したボタンをクリック(タップ)したら、対応するの位置へ移動 する。 ※ui_sample.png の「2」が、現在位置を表すスタイルまたは、クリック(タップ)し た時のスタイルです。
- バナー部のドラッグ(フリック)操作で1つずつ前後に移動する。