Fastboot compatible addon for Owl Carousel 2
This addon will install latest version of owl.carousel as dependency.
ember install ember-cli-owl-carousel2
This addon provides owl-carousel2 component. By default it'll use default theme or append owl-theme class.
{{#owl-carousel2}}
<div> Your Content </div>
<div> Your Content </div>
<div> Your Content </div>
{{/owl-carousel2}}
You can choose to not use default theme by passing theme=false. Or even exclude theme from build process (see below).
{{#owl-carousel2 theme=false}}
<div> Your Content </div>
<div> Your Content </div>
<div> Your Content </div>
{{/owl-carousel2}}
You can pass any valid Owl Carousel options to the component.
{{#owl-carousel2 loop=true items=1}}
<div> Your Content </div>
<div> Your Content </div>
<div> Your Content </div>
{{/owl-carousel2}}
And set callbacks by passing closure actions to the component
{{#owl-carousel2 onDragged=(action 'dragged')}}
<div> Your Content </div>
<div> Your Content </div>
{{/owl-carousel2}}
Also can pass navText and responsive options as JSON string. Please make sure that JSON.parse() can parse without errors.
{{#owl-carousel2 navText="[\"next\",\"prev\"]"}}
<div> Your Content </div>
<div> Your Content </div>
{{/owl-carousel2}}
{{#owl-carousel2 responsive='{ "320": { "items": 1 }, "1024": { "items": 2 }, "1600": { "items": 3 } }'}}
<div> Your Content </div>
<div> Your Content </div>
{{/owl-carousel2}}
If you would like to style using SASS please read the owl.carousel documentation. Please remember to install ember-cli-sass addon and exclude CSS in the configuration.
// app/styles/app.scss
@import 'node_modules/owl.carousel/src/scss/owl.carousel';
In most cases this addon requires no configuration. By default it imports JS, CSS and default theme from owl carousel.
- Don't import CSS (+ theme)
// ember-cli-build.js
var app = new EmberAddon(defaults, {
'ember-cli-owl-carousel2': {
css: false
}
});
- Change theme
// ember-cli-build.js
var app = new EmberAddon(defaults, {
'ember-cli-owl-carousel2': {
theme: 'green'
}
});
- Don't import theme, but CSS
// ember-cli-build.js
var app = new EmberAddon(defaults, {
'ember-cli-owl-carousel2': {
theme: false
}
});
ember serve
- Visit your app at http://localhost:4200.
npm test
(Runsember try:each
to test your addon against multiple Ember versions)ember test
ember test --server
ember build
For more information on using ember-cli, visit https://ember-cli.com/.