Skip to content

Instantly share code, notes, and snippets.

@sheriffderek
Forked from MrChriZ/controllers.application.js
Last active January 29, 2019 17:10
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save sheriffderek/ea3e589653c75d6d33a5488c5db31081 to your computer and use it in GitHub Desktop.
Save sheriffderek/ea3e589653c75d6d33a5488c5db31081 to your computer and use it in GitHub Desktop.
ember-flickity example [it's broken]
import Ember from 'ember';
export default Ember.Controller.extend({
appName: 'Ember Twiddle'
});
/* external css: flickity.css */
* { box-sizing: border-box; }
body { font-family: sans-serif; }
figure {
display: block;
margin: 0;
padding: 0;
}
figure img {
display: block;
width: 100%;
height: auto;
}
.carousel {
background: yellow;
}
.carousel figure {
width: 100%;
}
.flickity-wrapper {
/* min-height: 300px; */
}
.flickity-viewport {
min-height: 300px;
}
.flickity-slider {
/* min-height: 300px; */
}
<p>For some reason, you have to set height on the .flickity-viewport</p>
{{#em-flickity class="carousel" showSlides=true}}
<figure class="my-slideshow__item">
<img src="https://placehold.it/1600x900/ff0066" />
</figure>
<figure class="my-slideshow__item">
<img src="https://placehold.it/1600x900/ffc0cb" />
</figure>
{{/em-flickity}}
{
"version": "0.15.0",
"EmberENV": {
"FEATURES": {}
},
"options": {
"use_pods": false,
"enable-testing": false
},
"dependencies": {
"flikcityCSS":"https://npmcdn.com/flickity@2/dist/flickity.css",
"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-flickity": "0.1.5"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment