Make it a rich demo

akashdsouza · Jul 28, 2015 · dbba815 · dbba815
1 parent 8feb2ca
commit dbba815
Show file tree

Hide file tree

Showing 4 changed files with 82 additions and 21 deletions.
diff --git a/addon/services/carousel.js b/addon/services/carousel.js
@@ -21,8 +21,10 @@ export default Ember.Service.extend({
     var activeCarouselItem = this.get('activeCarouselItem');
     var newActiveCarouselItem = carouselItems[newActiveIndex];
 
-    activeCarouselItem.set('from', direction);
-    newActiveCarouselItem.set('from', direction);
+    run(function() {
+      activeCarouselItem.set('from', direction);
+      newActiveCarouselItem.set('from', direction);
+    });
 
     run.later(function() {
       activeCarouselItem.set('slidingOut', true);

diff --git a/addon/styles/carousel.css b/addon/styles/carousel.css
@@ -1,4 +1,5 @@
 .carousel-container {
+  position: relative;
   overflow: hidden;
   display: block;
 }

diff --git a/tests/dummy/app/styles/app.css b/tests/dummy/app/styles/app.css
@@ -4,6 +4,9 @@
 
 body {
   margin: 0;
+  font-family: "Helvetica Neue",Helvetica,Arial,sans-serifsans-serif;
+  color: #fff;
+  font-weight: 300;
 }
 
 html, body {
@@ -21,6 +24,24 @@ html, body {
   margin-top: 50px;
 }
 
+.image-credits {
+  margin-top: 10px;
+  text-align: center;
+}
+
+h2 {
+  font-weight: 300;
+}
+
+a {
+  color: #8FBECC;
+  text-decoration: none;
+}
+
+.text-center {
+  text-align: center;
+}
+
 
 /* For Carousel Component */
 .carousel-body {
@@ -71,3 +92,35 @@ html, body {
   position: relative;
   left: 0;
 }
+
+/* Arrows */
+/* Taken from http://codepen.io/trongthanh/pen/uvzxa */
+.line-arrow {
+  position: absolute;
+  overflow: hidden;
+  display: inline-block;
+  font-size: 12px;
+  width: 40px;
+  height: 40px;
+  margin-top: -20px;
+  top: 50%;
+  cursor: pointer;
+}
+
+.line-arrow.left {
+  border-top: 2px solid #a9a9a9;
+  border-left: 2px solid #a9a9a9;
+  transform: rotate(-54deg) skew(-20deg);
+  left: 20px;
+}
+
+.line-arrow.right {
+	border-top: 2px solid #a9a9a9;
+  border-right: 2px solid #a9a9a9;
+  transform: rotate(54deg) skew(20deg);
+  right: 20px;
+}
+
+.line-arrow.left:hover, .line-arrow.right:hover {
+  border-color: #444;
+}
diff --git a/tests/dummy/app/templates/application.hbs b/tests/dummy/app/templates/application.hbs
@@ -1,21 +1,26 @@
-{{#carousel-container classNames="demo-carousel"}}
-  {{#carousel-body}}
-    {{#carousel-item}}
-      <img class="img-responsive" src="https://ununsplash.imgix.net/photo-1434394673726-e8232a5903b4?dpr=2&fit=crop&fm=jpg&h=700&q=75&w=1050" />
-    {{/carousel-item}}
-    {{#carousel-item}}
-      <img class="img-responsive" src="https://ununsplash.imgix.net/photo-1433833103303-111110aae192?dpr=2&fit=crop&fm=jpg&h=700&q=75&w=1050" />
-    {{/carousel-item}}
-    {{#carousel-item}}
-      <img class="img-responsive" src="https://ununsplash.imgix.net/photo-1433785124354-92116416b870?dpr=2&fit=crop&fm=jpg&h=700&q=75&w=1050" />
-    {{/carousel-item}}
-  {{/carousel-body}}
+<div class="demo-carousel">
+  <h2 class="text-center"> Ember Carousel Addon </h2>
 
-  {{#carousel-arrow direction="left" tagName="button"}}
-    Slide Left
-  {{/carousel-arrow}}
+  {{#carousel-container}}
+    {{#carousel-body}}
+      {{#carousel-item}}
+        <img class="img-responsive" src="https://unsplash.imgix.net/photo-1428452932365-4e7e1c4b0987?dpr=2&fit=crop&fm=jpg&h=700&q=75&w=1050" />
+      {{/carousel-item}}
+      {{#carousel-item}}
+        <img class="img-responsive" src="https://ununsplash.imgix.net/photo-1429547584745-d8bec594c82e?q=75&fm=jpg&w=1080&fit=max&s=1870a82969024ba6816b271a49ca5876" />
+      {{/carousel-item}}
+      {{#carousel-item}}
+        <img class="img-responsive" src="https://ununsplash.imgix.net/photo-1433785124354-92116416b870?dpr=2&fit=crop&fm=jpg&h=700&q=75&w=1050" />
+      {{/carousel-item}}
+    {{/carousel-body}}
 
-  {{#carousel-arrow direction="right" tagName="button"}}
-    Slide Right
-  {{/carousel-arrow}}
-{{/carousel-container}}
+    {{carousel-arrow direction="left" class="line-arrow left"}}
+    {{carousel-arrow direction="right" class="line-arrow right"}}
+  {{/carousel-container}}
+
+  <div class="image-credits">
+    <small>
+      <i>Image Credits <a href="https://unsplash.com/" target="_blank" rel="nofollow">https://unsplash.com</a></i>
+    </small>
+  </div>
+</div>