angular-slick-carousel
Angular directive for slick-carousel
Summary
- Usage
- Attributes & Event
- Enable/disable slick
- Method
- Slide data
- Global Config
- faq
- Examples
- Creator
- Versions
Usage
- 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.
enabled
should slick be enabled or not. Default to true. Example belowmethod
optional containing slick method. discussed below in detailevent
optional containing slick event
$scopeslickConfig = enabled: true autoplay: true draggable: false autoplaySpeed: 3000 method: {} event: { } { } ;
Enable/disable slick
Slick can be easily switched on and off by using enabled
settings flag.
$scopeslickConfig = enabled: true $scope { $scopeslickConfigenabled = !$scopeslickConfigenabled; }
... Toggle
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 } ;
Examples
You need be running a server to see the samples:
Go to your terminal and run:
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:
Serving HTTP on 0.0.0.0 port 8000 ...
so you can see the samples with this adress: http://localhost:8000/examples/#/
Author
Forked from original @devmark's project
Versions
- 1.0.0 (May 2018) Initial release
- 1.1.0 (November 2018) Updated dependencies
- 1.2.0 (November 2018) Updated test suite