carousel-declarative

components.dec-carousel.js

import Ember from 'ember';
import Component from '@ember/component';

export default Component.extend({
  classNames: 'carousel',

  photos: null, // passed in

  actions: {
    moveLeft() {
      let container = this.$('.carousel-viewport');
      let current = +container.css('transform').replace(/[^0-9\-.,]/g, '').split(',')[4];
      let shifted = current + 1056;

      container.css('transform', `translate(${shifted}px)`);
    },

    moveRight() {
      let container = this.$('.carousel-viewport');
      let current = +container.css('transform').replace(/[^0-9\-.,]/g, '').split(',')[4];
      let shifted = current - 1056;

      container.css('transform', `translate(${shifted}px)`);
    }
  }

});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle'
});

controllers.index.js

import Ember from 'ember';

export default Ember.Controller.extend({
  photosList:[ "https://www.emberjs.com/images/tomsters/chicago-tomster-ccd89463.png","https://www.emberjs.com/images/tomsters/a11y-tomster-75779620.png"]
});

routes.index.js

import Ember from 'ember';

export default Ember.Route.extend({
});

styles.app.css

body {
  margin: 12px 16px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 12pt;
}

.carousel-image {
	height: 300px;
  width: 400px;
}

templates.application.hbs

<h1>Welcome to {{appName}}</h1>
<br>
<br>
{{outlet}}
<br>
<br>

templates.components.dec-carousel.hbs

{{yield}}
<div class='carousel-viewport' style='transform: translate(115px)'>

  {{#each photos as |photo index|}}
    <a class='carousel-slide'>
      <div class="carousel-image-wrapper">
        <div style='background-image: url({{photo}})' class="carousel-image"></div>
      </div>
    </a>
  {{/each}}

</div>

<div class="carousel-controls">
  <a {{action 'moveLeft'}} class='carousel-control' href="#">
    L
  </a>
  <a {{action 'moveRight'}} class='carousel-control' href="#">
   R
  </a>
</div>

templates.index.hbs

<p>dhkgff</p>
{{dec-carousel photos=photosList}}

twiddle.json

{
  "version": "0.15.0",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js",
    "ember": "3.2.2",
    "ember-template-compiler": "3.2.2",
    "ember-testing": "3.2.2",
      "ember-font-awesome": "https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css"

  },
  "addons": {
    "ember-data": "3.2.0"
  }
}