carousel ui - swipe menu
イシュー
- カルーセルを実現するuiの確認
参考
- [JS]レスポンシブにも対応した使いやすいカルーセルを探す時はこのスクリプトがオススメ! -slick | コリス
- カルーセルのUIは売り上げにつながるのか!? カルーセルデザインを考えるときに知っておきたい7つのこと
- Appleがトップページで自動送りカルーセルをやめた理由 – Rriver
- Hammer.jsでCarouselをスワイプできるようにする - xin9le.net
- hammer.js
- jQuery - カルーセル プラグイン
- FlexSlider 2
- WEB制作で使える!jQueryのスライダー・カルーセルプラグイン 30選 | ichimaruni-design
- スライダー30選
ember x carousel
- ember.js - couldn't get Bootstrap carousel to work with Ember - Stack Overflow
- Addepar | Ember Widgets
- hammer.js - Carousel Example
- PC上でスワイプを実現しているサンプル
- chriswessels/ember-hammer · GitHub
- ember-mobiletouch
components
- とりあえずコンポーネントの書き方
参考
- Ember Components Tutorial
- ちょっと古い、今はbind-attrなしで、属性に直接書ける
- DEPRECATION: The `bind-attr` helper · Issue #242 · machty/emblem.js · GitHub
hammer.js
- ジェスチャーJS
参考
- Hammer.JS - Hammer.js
- Hammer.jsを使ってダブルタップを実装してみた | while(isプログラマ)
- hammer.jsを使ってCanvas上の画像を移動させる - @thorikiriのてょりっき
- Hammer.JSでオプション調整をスワイプ・ピンチ・ローテートで行えるように変更 | iconDecotter-Log
- Hammer.js for Angular.js — Ryan Mullins
- Basic Hammer.js example
- jQuery のバブリング、preventDefault() や stopPropagation() の使用例 | Tips Note
- jquery.hammer.js : 2.0.0 - Track your Open Source Libraries at VersionEye
- jquery.hammer の bowerの書き方
ember-mobiletouch
参考
- runspired/ember-mobiletouch · GitHub
- install コマンド一番目は、npm install ではなく、ember installの誤り
- fastclick のインストールが必要
bower install fastclick
- gestureは、swipeRightなど
- handleberに記載する時はlowerCamelCaseである必要がある
- hoge/app/templates/index.hbs
<h1>ember gesture</h1> <div id="myElement" {{action "myAction" on="swipeRight"}}></div>
- hoge/app/controllers/index.js
import Ember from 'ember'; export default Ember.Controller.extend({ actions: { myAction: function() { console.log('myAction IN!'); } } });
slick
/* global require, module */ var EmberApp = require('ember-cli/lib/broccoli/ember-app'); module.exports = function(defaults) { var app = new EmberApp(defaults, { // Add options here }); // Use `app.import` to add additional libraries to the generated // output files. // // If you need to use different assets in different // environments, specify an object as the first parameter. That // object's keys should be the environment name and the values // should be the asset to use in that environment. // // If the library that you are including contains AMD or ES6 // modules that you would like to import into your application // please specify an object with the list of modules as keys // along with the exports of each module as its value. app.import('bower_components/slick.js/slick/slick.css'); app.import('bower_components/slick.js/slick/slick-theme.css'); app.import('bower_components/slick.js/slick/slick.js'); return app.toTree(); };
- hoge/app/template/index.hbs
<div class="carousel"> <div>your content1</div> <div>your content2</div> <div>your content3</div> </div>
- hoge/app/controllers/index.js
import Ember from 'ember'; export default Ember.Controller.extend({ init : function() { Ember.$('.carousel').slick(); } });
参考
- slick - the last carousel you'll ever need
- javascript - Slick slideshow in ember.js template - Stack Overflow
- Package - ember-cli-slick
sly
owl
owl carousel2
- Home | Owl Carousel | 2.0.0-beta.2.4
- http://q2a.science/using-owl-carousel-with-ember-i214083.htm
- ember.js - Ember Js Adding A Model Which is Dynamically Rendered On the UI - Stack Overflow
- javascript - Using Owl Carousel with Ember - Stack Overflow
- nestedItemSelector 属性を使用して、配列をカルーセルに
- サンプル