Angularjs directive for slick carousel
npm install angularjs-slickcarousel-directiveangular-slick-carousel
======================
Angular directive for slick-carousel
- Usage
- Attributes & Event
- Enable/disable slick
- Method
- Slide data
- Global Config
- faq
- Examples
- Creator
- Versions
- Add jquery, angular, slick-carousel and angular-slick-carousel to your code.
``html`
- Add the sortable module as a dependency to your application module: slickCarousel
`js`
var myAppModule = angular.module('MyApp', ['slickCarousel'])
This directive allows you to use the slick-carousel plugin as
an angular directive. It can be specified in your HTML
as either a
attribute or a element.`html
...
Attributes & Event
: optional Object containing any of the slick options. Consult here.
- enabled should slick be enabled or not. Default to true. Example below
- method optional containing slick method. discussed below in detail
- event optional containing slick event`javascript
$scope.slickConfig = {
enabled: true,
autoplay: true,
draggable: false,
autoplaySpeed: 3000,
method: {},
event: {
beforeChange: function (event, slick, currentSlide, nextSlide) {
},
afterChange: function (event, slick, currentSlide, nextSlide) {
}
}
};
`
Enable/disable slick
Slick can be easily switched on and off by using settings flag.
`js
$scope.slickConfig = {
enabled: true,
}
$scope.toggleSlick = function() {
$scope.slickConfig.enabled = !$scope.slickConfig.enabled;
}
`
html
...
`
Method
1. All the functions in the plugin are exposed through a control
attribute.
2. To utilize this architecture, and have two-way data-binding,
define an empty control handle on scope:
js
$scope.slickConfig = {
method: {}
}
`
3. Pass it as the value to control attribute. Now, you can call any plugin methods
as shown in the example.html
`Slide data
For change slide content, you have to set to destroy and init it- controller:
`js
$scope.number = [{label: 1}, {label: 2}, {label: 3}, {label: 4}, {label: 5}, {label: 6}, {label: 7}, {label: 8}];
$scope.numberLoaded = true;
$scope.numberUpdate = function(){
$scope.numberLoaded = false; // disable slick
//number update
$scope.numberLoaded = true; // enable slick
};
`
- html:
html
`Global config
js
config(['slickCarouselConfig', function (slickCarouselConfig) {
slickCarouselConfig.dots = true;
slickCarouselConfig.autoplay = false;
}])
`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:
js
$scope.currentIndex = 0;
$scope.slickConfig = {
event: {
afterChange: function (event, slick, currentSlide, nextSlide) {
$scope.currentIndex = currentSlide; // save current index each time
}
init: function (event, slick) {
slick.slickGoTo($scope.currentIndex); // slide to correct index when init
}
}
};
`Examples
You need be running a server to see the samples:
Go to your terminal and run:
sh
python -m SimpleHTTPServer`
after this command you will be loading a python Server in you local machine in most the cases loads in the port 8000, you will be able to see the port when the server starts like that:
sh
Serving HTTP on 0.0.0.0 port 8000 ...
``so you can see the samples with this adress: http://localhost:8000/examples/#/