ember-cli-slick is a component that wraps the Slick Slider plugin functionality.
From inside your ember-cli project, run the following:
ember install ember-cli-slickember install:addon ember-cli-slick(the swipe event will send a swiped in order to prevent naming issues)
####Init Event
A slickInit event may be bound from your template. This event is triggered after Ember's internal didInsertElement with a DOM reference to the newly created widget allowing direct manipulation of the DOM elements after creation.
import Ember from 'ember';
export default Ember.Controller.extend({
breakpoints: [
{
'breakpoint': 1024,
'settings': {
'slidesToShow': 3,
'slidesToScroll': 3,
'infinite': true
}
},
{
'breakpoint': 600,
'settings': {
'slidesToShow': 2,
'slidesToScroll': 2
}
},
{
'breakpoint': 480,
'settings': {
'slidesToShow': 1,
'slidesToScroll': 1
}
}
]
});Assigning currentSlide to a controller property will cause two-way binding that allows you to keep track of the current slide, and to navigate between slides by setting the value of that bound property. This can be particularly useful when you have more than images in the slider, or if you need to to sync the currently visible slide with other things that are happening on the page, such as a list of instructions with a corresponding image.
import Ember from 'ember';
export default Ember.Controller.extend({
galleryCurrentSlide: function() {
return 0;
}.property(),
actions: {
/**
* This function will transition the slider
* to the specified slide
**/
gotoSlide: function(slide) {
this.set("galleryCurrentSlide", slide);
},
/**
* Will transition to next Slide
**/
gotoNextSlide: function() {
this.set("galleryCurrentSlide", this.get("galleryCurrentSlide") + 1);
},
/**
* Will transition to Previous Slide
**/
gotoPrevSlide: function() {
if(this.get("galleryCurrentSlide") > 0) {
this.set("galleryCurrentSlide", this.get("galleryCurrentSlide") - 1);
}
}
}
});This widget supports the full range of slick-slider configuration options. The full list with descriptions can be found at the slick-slider homepage: http://kenwheeler.github.io/slick/
- accessibility
- adaptiveHeight
- autoplay
- autoplaySpeed
- arrows
- asNavFor
- appendArrows
- prevArrow
- nextArrow
- centerMode
- centerPadding
- cssEase
- customPaging
- dots
- draggable
- fade
- focusOnSelect
- easing
- edgeFriction
- infinite
- initialSlide
- lazyLoad
- mobileFirst
- pauseOnHover
- pauseOnDotsHover
- respondTo
- responsive
- rows
- slide
- slidesPerRow
- slidesToShow
- slidesToScroll
- speed
- swipe
- swipeToSlide
- touchMove
- touchThreshold
- useCss
- variableWidth
- vertical
- verticalSwiping
- rtl
git clonethis repositorynpm installbower install
ember server- Visit your app at http://localhost:4200.
ember testember test --server
ember build
For more information on using ember-cli, visit http://www.ember-cli.com/.