image slider

components.attachment-preview.js

import Component from '@ember/component';
import { computed } from '@ember/object';

export default Component.extend({
  index: 0,
  
  selectedAttachment: computed('attachments.[]', 'index', function() {
    return this.attachments[Number(this.index)];
  }),
  
  isFirstAttachment: computed('attachments.[]', 'index', function() {
    return this.index === 0;
  }),
  
  isLastAttachment: computed('attachments.[]', 'index', function() {
  	return this.index === this.attachments.get('length') - 1;
	}),
  
  actions: {
    prev() {
      if (this.isFirstAttachment) return;
      this.decrementProperty('index')
    },
    
    next() {
      if (this.isLastAttachment) return;
      this.incrementProperty('index');
    }
  }
});

components.x-arrow.js

import Ember from 'ember';

export default Ember.Component.extend({
  tagName: ''
});

controllers.application.js

import Ember from 'ember';

const images = [
  {url: "https://i.imgur.com/wgsdhsw.png"}, 
  {url: "https://i.imgur.com/8Uxcct4.png"},
  {url: "https://i.imgur.com/IcNcoMr.png"}
];

export default Ember.Controller.extend({
  
  init() {
    this._super(...arguments);
		this.set('attachments', images);
  }

});

styles.app.css

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

.attachment-preview {
  align-items: center;
  display: flex;
  justify-content: space-around;
  height: 100vh;
  width: 100vw;
}

.prev, .next {
  align-items: center;
  background-color: #FFF;
  border: solid 1px black;
  border-radius: 50%;
  display: flex;
  height: 40px;
  justify-content: center;
  max-width: 40px;
  opacity: 1;
  transition: opacity .4s;
  width: 100%;
}

.prev.disabled, .next.disabled {
  opacity: 0;
}

.prev {
  transform: rotate(180deg);
}

svg {
  width: 16px;
}

img {
  max-width: 300px;
}

templates.application.hbs

{{attachment-preview attachments=attachments}}

templates.components.attachment-preview.hbs

<div class="attachment-preview">
	<div class="prev btn {{if isFirstAttachment 'disabled'}}" {{action "prev"}}>  
    {{x-arrow}}
  </div>
  <img src={{selectedAttachment.url}}>
  <div class="next btn {{if isLastAttachment 'disabled'}}"{{action "next"}}>
    {{x-arrow}}
  </div>
</div>

templates.components.x-arrow.hbs

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
  <path d="M12.753 9H1.001a1 1 0 0 1 0-2h11.75l-2.479-2.293a.991.991 0 0 1 0-1.414 1.022 1.022 0 0 1 1.433 0l3.85 3.647a1.483 1.483 0 0 1 0 2.121l-3.85 3.647a1.022 1.022 0 0 1-1.433 0 .991.991 0 0 1 0-1.414L12.753 9z"></path>
</svg>

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"
  },
  "addons": {
    "ember-data": "3.2.0"
  }
}