angular-slick-carousel
Angular directive for slick-carousel
Usage
- Using bower to install it.
bower install angular-slick-carousel
- Add
jquery
,angular
,slick-carousel
andangular-slick-carousel
to your code.
- Add the sortable module as a dependency to your application module:
slickCarousel
var myAppModule = angular
This directive allows you to use the slick-carousel plugin as
an angular directive. It can be specified in your HTML
as either a <div>
attribute or a <slick>
element.
...
Attributes & Event
settings
: optional Object
containing any of the slick options. Consult here.
method
optional containing slick method. discussed below in detailevent
optional containing slick event
$scopeslickConfig = autoplay: true draggable: false autoplaySpeed: 3000 method: {} event: { } { } ;
Method
- All the functions in the plugin are exposed through a control attribute.
- To utilize this architecture, and have two-way data-binding, define an empty control handle on scope:
$scopeslickConfig = method: {}
- Pass it as the value to control attribute. Now, you can call any plugin methods as shown in the example.
slickGoTo(2)slickPrev()slickNext()slickAdd()slickRemove(3)slickPlay()slickPause()
Slide data
For change slide content, you have to set ng-if
to destroy and init it
- controller:
$scopenumber = label: 1 label: 2 label: 3 label: 4 label: 5 label: 6 label: 7 label: 8; $scopenumberLoaded = true; $scope{ $scopenumberLoaded = false; // disable slick //number update $scopenumberLoaded = true; // enable slick };
- html:
Global config
FAQ
Q: After change data, could i keep the current slide index? A: For this directive, this will destroy and init slick when updating data. You could get current index by event. example:
$scopecurrentIndex = 0; $scopeslickConfig = event: { $scopecurrentIndex = currentSlide; // save current index each time } { slick; // slide to correct index when init } ;