carousel ui - swipe menu

イシュー

参考

ember x carousel

components

hammer.js

ember-mobiletouch

参考

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();
    }

});

参考

sly

owl

owl carousel2

addepar

参考

swipe menu

参考