Skip to content

Instantly share code, notes, and snippets.

@hbrysiewicz
Last active January 2, 2016 21:28
Show Gist options
  • Save hbrysiewicz/8363192 to your computer and use it in GitHub Desktop.
Save hbrysiewicz/8363192 to your computer and use it in GitHub Desktop.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ember Starter Kit</title>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/normalize/2.1.0/normalize.css">
</head>
<body>
<script type="text/x-handlebars">
{{#view App.CarouselView}}
{{fruit-component fruit="Apple"}}
{{fruit-component fruit="Banana"}}
{{fruit-component fruit="Cantelope"}}
{{/view}}
</script>
<script type="text/x-handlebars" data-template-name="components/fruit-component">
{{fruit}}
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://builds.handlebarsjs.com.s3.amazonaws.com/handlebars-v1.2.1.js"></script>
<script src="http://builds.emberjs.com/tags/v1.3.0/ember.js"></script>
</body>
</html>
App = Ember.Application.create();
App.CarouselView = Ember.View.extend({
currentIndex: 0,
transitionInterval: 600,
childLength: function() {
return this.get('childViews.length');
}.property('childViews'),
childVisibility: function() {
var _this = this;
this.get('childViews').forEach(function(item) {
item.set('isVisible', _this.get('currentIndex') === _this.get('childViews').indexOf(item));
});
}.observes('currentIndex'),
didInsertElement: function() {
var _this = this;
this.get('childViews').forEach(function(item) {
item.set('isVisible', _this.get('currentIndex') === _this.get('childViews').indexOf(item));
});
setInterval(function() {
var nextIndex = _this.get('currentIndex') + 1;
if (nextIndex === _this.get('childLength')) nextIndex = 0;
_this.set('currentIndex',nextIndex);
}, _this.get('transitionInterval'));
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment