Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/devmark/angular-slick-carousel
Angular directive for slick-carousel
https://github.com/devmark/angular-slick-carousel
Last synced: about 2 months ago
JSON representation
Angular directive for slick-carousel
- Host: GitHub
- URL: https://github.com/devmark/angular-slick-carousel
- Owner: devmark
- License: mit
- Created: 2014-04-02T19:45:15.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2020-07-15T20:16:52.000Z (about 4 years ago)
- Last Synced: 2024-07-17T04:03:05.326Z (2 months ago)
- Language: JavaScript
- Homepage: http://devmark.github.io/angular-slick-carousel/
- Size: 685 KB
- Stars: 352
- Watchers: 14
- Forks: 125
- Open Issues: 51
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
angular-slick-carousel
======================
angular 2 above take a look https://github.com/devmark/ngx-slick
[](https://gitter.im/devmark/angular-slick-carousel?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
Angular directive for [slick-carousel](http://kenwheeler.github.io/slick/)
## Summary
- [Usage](#usage)
- [Attributes & Event](#attributes--event)
- [Enable/disable slick](#enabledisable-slick)
- [Method](#method)
- [Slide data](#slide-data)
- [Global Config](#global-config)
- [faq](#faq)
- [Examples](#examples)
- [Creator](#creator)
## Usage
-----
- Using [bower](http://bower.io/) to install it. `bower install angular-slick-carousel`
- 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
`settings`: optional `Object` containing any of the slick options. Consult [here](http://kenwheeler.github.io/slick/#settings).
- `enabled` should slick be enabled or not. Default to true. Example below
- `method` optional containing slick method. discussed [below](#method) 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 `enabled` settings flag.
```js
$scope.slickConfig = {
enabled: true,
}
$scope.toggleSlick = function() {
$scope.slickConfig.enabled = !$scope.slickConfig.enabled;
}
```
```html
...
Toggle
```
## 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
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:
```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
<h3>{{ i.label }}</h3>
```
## 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
Now to run the samples in your local machine you just need to run:
```sh
grunt serve
```
so you will start a web server on http://localhost:8000
now acess the folder examples: http://localhost:8000/examples/#/
## Creator
[@devmark](https://github.com/devmark)