{"id":17880660,"url":"https://github.com/benjamincharity/angular-flickity","last_synced_at":"2025-03-22T08:31:04.183Z","repository":{"id":54160462,"uuid":"48713241","full_name":"benjamincharity/angular-flickity","owner":"benjamincharity","description":"👆 An AngularJS wrapper for Flickity (Touch, responsive, flickable carousels)","archived":false,"fork":false,"pushed_at":"2018-11-23T20:46:06.000Z","size":2209,"stargazers_count":33,"open_issues_count":9,"forks_count":22,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-18T10:01:38.452Z","etag":null,"topics":["angularjs","carousel","flickity","slideshow","touch"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/benjamincharity.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-12-28T21:28:15.000Z","updated_at":"2024-04-12T19:09:13.000Z","dependencies_parsed_at":"2022-08-13T08:00:33.148Z","dependency_job_id":null,"html_url":"https://github.com/benjamincharity/angular-flickity","commit_stats":null,"previous_names":[],"tags_count":30,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/benjamincharity%2Fangular-flickity","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/benjamincharity%2Fangular-flickity/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/benjamincharity%2Fangular-flickity/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/benjamincharity%2Fangular-flickity/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/benjamincharity","download_url":"https://codeload.github.com/benjamincharity/angular-flickity/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244931466,"owners_count":20534007,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angularjs","carousel","flickity","slideshow","touch"],"created_at":"2024-10-28T12:26:58.532Z","updated_at":"2025-03-22T08:31:03.690Z","avatar_url":"https://github.com/benjamincharity.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Angular Flickity\n\n\u003cimg src=\"http://cdn.benjamincharity.com/open_source/angular-flickity/mark.png\" align=\"right\" alt=\"angular-flickity\"\u003e\n\n[![MIT License][license_image]][license_url] [![Coverage Status][coverage_image]][coverage_url] [![NPM version][npm_version_image]][npm_url] [![CircleCI][circle_badge]][circle_link]\n\nAn AngularJS module that exposes a directive and service to create and control multiple\n[Flickity][flickity] instances.\n\n\u003e [:tv: **Demos and Examples**][demo_collection]\n\n[Flickity][flickity] by [Metafizzy][metafizzy]\n\n_[Comments and pull requests welcome!][issues]_\n\n## Contents\n\n- [Installation](#installation)\n  - [Dependencies](#dependencies)\n- [Usage](#usage)\n- [Options](#options)\n- [ID](#id)\n- [Global Defaults](#global-defaults)\n- [Directives](#directives)\n    - [`bc-flickity`](#bc-flickity)\n    - [`bc-flickity-next`](#bc-flickity-next)\n    - [`bc-flickity-previous`](#bc-flickity-previous)\n- [Services](#services)\n    - [Initialize](#initialize)\n        - [`create`](#create)\n    - [Selecting Cells](#selecting-cells)\n        - [`select`](#select)\n        - [`previous`](#previous)\n        - [`next`](#next)\n    - [Sizing and Positioning](#sizing-and-positioning)\n        - [`resize`](#resize)\n        - [`reposition`](#reposition)\n    - [Adding and Removing Cells](#adding-and-removing-cells)\n        - [`prepend`](#prepend)\n        - [`append`](#append)\n        - [`insert`](#insert)\n        - [`remove`](#remove)\n    - [Utilities](#utilities)\n        - [`destroy`](#destroy)\n        - [`reloadCells`](#reloadcells)\n        - [`getCellElements`](#getcellelements)\n        - [`get`](#get)\n        - [`getFirst`](#getfirst)\n        - [`getByElement`](#getbyelement)\n    - [Properties](#properties)\n        - [`selectedIndex`](#selectedindex)\n        - [`selectedElement`](#selectedelement)\n        - [`cells`](#cells)\n- [Events](#events)\n  - [Events and Parameters](#eventsandparameters)\n  - [Event Naming Convention](#eventnamingconvention)\n- [Demos](#demos)\n- [Development](#development)\n- [About Flickity](#about-flickity)\n\n---\n\n## Installation\n\n#### Dependencies\n\n- [AngularJS `(^1.4.0)`][angular]\n- [Flickity `(^2.0.5)`][flickity_docs]\n- [flickity-imagesloaded `(^2.0.0)`][flickity_imagesloaded] (if using the [imagesloaded option][flickity_options])\n- [flickity-bg-lazyload `(^1.0.0)`][flickity-bg-lazyload] (if using the [bgLazyLoad option][flickity_options])\n\n\n#### NPM\n\n```bash\nnpm install flickity --save\nnpm install flickity-imagesloaded --save # if using the imagesloaded option\nnpm install flickity-bg-lazyload --save # if using the bg-lazyload option\nnpm install angular-flickity --save\n```\n\n#### Bower\n\n```bash\nbower install flickity --save\nbower install flickity-imagesloaded --save # if using the imagesloaded option\nbower install flickity-bg-lazyload --save # if using the bg-lazyload option\nbower install angular-flickity --save\n```\n\n### Include the scripts\n\nInclude `Flickity` (and `flickity-imagesloaded`/`flickity-bg-lazyload` if needed):\n\n#### Webpack\n\n```\nimport Flickity from 'flickity';\nimport 'flickity-imagesloaded';\nimport 'flickity-bg-lazyload';\nimport 'angular-flickity';\n\nangular.module('myProject', ['bc.Flickity']);\n```\n\n#### Manually\n\n```\n\u003c!-- Include the module --\u003e\n\u003cscript src=\"path/to/lib/flickity.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"path/to/lib/flickity-imagesloaded.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"path/to/lib/flickity-bg-lazyload.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"path/to/angular-flickity/dist/angular-flickity.js\"\u003e\u003c/script\u003e\n```\n\n\n##### Note when using Flickity via bower\n\nIn my experience, including Flickity through bower often doesn't work out of the box. By default,\nbower pulls in the unpackaged files as the Flickity `bower.json` specifies rather than packaged\nfiles which seems to be what we need.\n\nThe trick is to specify which files bower should use in your own `bower.json`.\n\n```json\n// inside your bower.json specify which Flickity files to use\n{\n  \"name\": \"myProject\",\n  \"overrides\": {\n    \"flickity\": {\n      \"main\": [\n        \"dist/flickity.pkgd.js\",\n        \"dist/flickity.min.css\"\n      ]\n    }\n  }\n}\n```\n\n\n## Usage\n\nInclude `bc.Flickity` as a dependency in your project.\n\n```javascript\nangular.module('YourModule', ['bc.Flickity']);\n```\n\nUse the directive on the parent element containing your slides.\n\n```html\n\u003c!-- Define the gallery: --\u003e\n\u003cdiv\n  bc-flickity=\"{{ vm.flickityOptions }}\"\n  id=\"myCustomId\"\n\u003e\n  \u003cfigure class=\"demo__slide\" data-ng-repeat=\"slide in vm.slides\"\u003e\n      \u003cimg data-ng-src=\"{{ slide }}\" alt=\"\" /\u003e\n  \u003c/figure\u003e\n\u003c/div\u003e\n\n\u003c!-- Define the previous button (optional): --\u003e\n\u003cbutton\n  bc-flickity-previous\n  bc-flickity-id=\"myCustomId\"\n\u003ePrevious\u003c/button\u003e\n\n\u003c!-- Define the next button (optional): --\u003e\n\u003cbutton\n  bc-flickity-next\n  bc-flickity-id=\"myCustomId\"\n\u003eNext\u003c/button\u003e\n```\n\n\n## Options\n\nThis module supports all options for Flickity version `2.0.5`. A full list of options can be\nfound here: [Flickity Options](http://flickity.metafizzy.co/options.html).\n\nSimply pass in an object containing any options you'd like to set.\n\n```javascript\n// ES5 example\nangular.module('myModule')\n  .controller('MyController', ($scope) =\u003e {\n\n    $scope.myCustomOptions = {\n      cellSelector: '.mySlideClassName',\n      initialIndex: 3,\n      prevNextButtons: false,\n    };\n\n  })\n;\n\n\n// ES6 example\nexport class MyController {\n  constructor() {\n\n    this.flickityOptions = {\n      cellSelector: '.mySlideClassName',\n      initialIndex: 3,\n      prevNextButtons: false,\n    };\n\n  }\n}\n```\n\n`my.template.html`:\n```html\n\u003c!-- In your template --\u003e\n\u003cdiv bc-flickity=\"{{ myCustomOptions }}\"\u003e\n  \u003cdiv class=\"mySlideClassName\"\u003e\u003c/div\u003e\n  \u003cdiv class=\"mySlideClassName\"\u003e\u003c/div\u003e\n  ...\n\u003c/div\u003e\n```\n\n\n## ID\n\nThe `FlickityService` uses IDs to manage multiple instances of the directive. An ID is automatically\ncreated and assigned at initialization. However, at times you may need to access your instances in a\nprogrammatic way. There are two ways for IDs to be defined by your module.\n\n#### Element ID\n\nIf the element containing the `bc-flickity` directive has an ID attribute, the value will\nbe used to create the ID.\n\n```html\n\u003c!-- This instance would have the ID of `foo` --\u003e\n\u003cdiv\n  bc-flickity=\"{{ myCustomOptions }}\"\n  id=\"foo\"\n\u003e\n  \u003c!-- slides --\u003e\n\u003c/div\u003e\n```\n\n#### Explicitly Define\n\nAt times, you may not be able to use an element ID (or simply prefer not to). In those cases you can\npass the ID in directly as a string using `bc-flickity-id`.\n\n```html\n\u003c!--  This instance would have the ID of `bar` --\u003e\n\u003cdiv\n  bc-flickity=\"{{ myCustomOptions }}\"\n  bc-flickity-id=\"bar\"\n\u003e\n  \u003c!-- slides --\u003e\n\u003c/div\u003e\n```\n\n\n## Global Defaults\n\nThis module exposes `FlickityConfigProvider` which can be used to set project-wide defaults for\nFlickity. Simply set any options here using options that match the original [Flickity\noptions](http://flickity.metafizzy.co/options.html).\n\n```javascript\n// ES6 Config Example\nexport function config(FlickityConfigProvider) {\n    'ngInject';\n\n    FlickityConfigProvider.prevNextButtons = true;\n    FlickityConfigProvider.setGallerySize = false;\n\n}\n```\n\n```javascript\n// ES5 Config Example\nangular.module('myModule')\n    .config((FlickityConfigProvider) =\u003e {\n        'ngInject';\n\n        FlickityConfigProvider.prevNextButtons = true;\n        FlickityConfigProvider.setGallerySize = false;\n\n    })\n;\n```\n\n\n## Directives\n\n### `bc-flickity`\n\nThe directive `bc-flickity` creates the Flickity gallery.\n\n```html\n\u003cdiv bc-flickity\u003e\n  \u003c!-- slides --\u003e\n\u003c/div\u003e\n```\n\nYou may optionally pass an options object to the directive. User defined options will override any\ndefault options.\n\n```html\n\u003cdiv bc-flickity=\"{{ vm.flickityOptions }}\"\u003e\n  \u003c!-- slides --\u003e\n\u003c/div\u003e\n```\n\n\u003e _Learn more about [`angular-flickity` options](#options) \u0026 [Flickity options\n\u003e documentation][flickity_options]_\n\n\n### `bc-flickity-next`\n\nThe directive `bc-flickity-next` is provided to call the `next()` method on a `Flickity` instance.\n\n```html\n\u003cbutton bc-flickity-next\u003eNext\u003c/button\u003e\n```\n\n#### Multiple Instances\n\nIf you need to support multiple `Flickity` instances in a single view you can specify an instance ID\nthat the control should be linked to.\n\n```javascript\n\u003cbutton\n  bc-flickity-next\n  bc-flickity-id=\"customId\"\n\u003eNext\u003c/button\u003e\n```\n\n\u003e _More on setting the ID using a [directive](#id) or [service](#initialize)._\n\nIf no ID is set, the directive will assume that only one instance exists and grab the ID from the\nfirst instance.\n\n#### Looping\n\nThis directive accepts an optional parameter to control the looping. If `true` and at the last cell\nwhen clicked, Flickity will loop back to the first cell. If `false`, it will do nothing when\nclicked at the last cell.\n\n```html\n\u003cbutton bc-flickity-next=\"true\"\u003eNext\u003c/button\u003e\n```\n\n#### Disabled\n\nWhen the last cell is reached, the `disabled` attribute will be added to the element. The `disabled`\nattribute will _not_ be added if either of these conditions are met:\n\n- The associated gallery has `wrapAround` set to `true`.\n- The directive has `true` passed in as the optional parameter (which overrides the default\n    options).\n\n\n### `bc-flickity-previous`\n\nThe directive `bc-flickity-previous` is provided to call the `previous()` method on the `Flickity`\ninstance.\n\n```html\n\u003cbutton bc-flickity-previous\u003ePrevious\u003c/button\u003e\n```\n\n#### Multiple Instances\n\nIf you need to support multiple `Flickity` instances in a single view you can specify an instance ID\nthat the control should be linked to.\n\n```javascript\n\u003cbutton\n  bc-flickity-next\n  bc-flickity-id=\"customId\"\n\u003eNext\u003c/button\u003e\n```\n\n\u003e _More on setting the ID using a [directive](#id) or [service](#initialize)._\n\nIf no ID is set, the directive will assume that only one instance exists and grab the ID from the\nfirst instance.\n\n#### Looping\n\nThis directive accepts an optional parameter to control the looping. If `true` and at the first cell\nwhen clicked, Flickity will loop around to the last cell. If `false`, it will do nothing when\nclicked at the first cell.\n\n```html\n\u003cbutton bc-flickity-previous=\"true\"\u003ePrevious\u003c/button\u003e\n```\n\n#### Disabled\n\nWhen at the first cell, the `disabled` attribute will be added to the element. The `disabled`\nattribute will _not_ be added if either of these conditions are met:\n\n- The associated gallery has `wrapAround` set to `true`.\n- The directive has `true` passed in as the optional parameter (which overrides the default\n    options).\n\n\n- - -\n\n\n## Services\n\nWhile you can easily use Flickity via the directive only, most Flickity methods are accessible via\nthe `FlickityService`.\n\n\u003e The services here follow the order of the [Flickity Documentation][flickity_api] as closely as possible\nin order to be immediately familiar. This shouldn't feel like learning another library (assuming\nyou are already familiar with Flickity).\n\n\u003e [:tv: Service demo][demo_service_select]\n\n- - -\n\n\u003e _Don't be afraid to look at the [source code][source]. It isn't terribly complicated and fairly well\n\u003e commented._\n\n### Initialize\n\n#### `create`\n\nThis can be called to manually create a new `Flickity` instance.\n\n\u003e [:tv: Create instance demo][demo_create_remote_docready]\n\n```javascript\nFlickityService.create(element, id, options)\n```\n\n##### Parameters\n\n- `element`: `{Element}`\n  - A DOM element wrapped as a jQuery object. This can be done with jqLite\n      (`angular.element(element)`) or jQuery (`$(element)`)\n- `id`: `{String}` _optional_\n  - ID for the created `Flickity` instance. If no ID is assigned, one will be created and used\n      internally.\n- `options`: `{Object}` _optional_\n  - Options object for Flickity\n\n##### Returns `Promise`\n\n- `instance`: `{Object}`\n\n```javascript\n// Example return\n{\n    id: 'foo',\n    instance: Flickity\n};\n```\n\n\u003e **NOTE:**\n\u003e Anytime you are dealing with the DOM from inside a controller (:-1:) make sure to use\n\u003e document.ready. This ensures that the element you are looking for actually exists. You can also\n\u003e use a $timeout but I find using document.ready more accurately represents the intention.\n\n\u003e [:tv: Demo showing DOM issue and solution][demo_create_remote_docready]\n\n```javascript\n// document.ready example\nangular.element($document[0]).ready(() =\u003e {\n    // Get the element that should hold the slider\n    const element = angular.element(document.getElementById('demo-slider'));\n\n    // Initialize our Flickity instance\n    FlickityService.create(element[0], element[0].id);\n});\n```\n\n\u003e **NOTE:**\n\u003e If you are dealing with remote data, you should wrap the `.create()` call with a `$timeout`.\n\u003e This ensures that the data has already been assigned to scope before the slider is initialized.\n\n\u003e [:tv: Demo with remote data][demo_create_remote_docready]\n\n```javascript\n// Remote data example\n$http.get('http://yourRemoteSource.com/slides.json')\n  .then((results) =\u003e {\n\n    // Expose the slides array to $scope\n    $scope.slides = results.data;\n\n    // Get the element that should hold the slider\n    const element = angular.element(document.getElementById('demo-slider'));\n\n    // NOTE: When fetching remote data, we initialize the Flickity\n    // instance inside of a $timeout. This ensures that the slides\n    // have already been assigned to scope before the slider is\n    // initialized.\n    $timeout(() =\u003e {\n      // Initialize our Flickity instance\n      FlickityService.create(element[0], element[0].id);\n    });\n  });\n```\n\n### Selecting Cells\n\n#### `select`\n\nMove directly to a specific slide.\n\n\u003e [:tv: Selecting a cell demo][demo_service_select]\n\n```javascript\nFlickityService.select(id, index, isWrapped, isInstant)\n```\n\n- `id`: `{String}`\n  - A string representing the ID of the `Flickity` instance to move.\n- `index`: `{Number}`\n- `isWrapped`: `{Bool}` _optional_\n  - Default: `false`\n  - If `true` and `previous` is called when on the first slide, the slider will wrap around to show\n      the last slide.\n  - If `true` and `next` is called when on the last slide, the slider will wrap back to show slide 1.\n- `isInstant`: `{Bool}` _optional_\n  - Default: `false`\n  - If `true` the slide will change instantly with no animation.\n\n##### Returns `Promise`\n\n- `instance`: `{Object}`\n\n\n#### `previous`\n\nMove to the previous slide.\n\n```javascript\nFlickityService.previous(id, isWrapped, isInstant)\n```\n\n##### Parameters\n\n- `id`: `{String}`\n  - A string representing the ID of the `Flickity` instance to move.\n- `isWrapped`: `{Bool}` _optional_\n  - Default: `false`\n  - If `true` and `previous` is called when on the first slide, the slider will wrap around to show\n      the last slide.\n  - If `false` and `previous` is called when on the first slide, the slider will do nothing.\n- `isInstant`: `{Bool}` _optional_\n  - Default: `false`\n  - If `true` the slide will change instantly with no animation.\n\n##### Returns `Promise`\n\n- `instance`: `{Object}`\n\n\n#### `next`\n\nMove to the next slide.\n\n```javascript\nFlickityService.next(id, isWrapped, isInstant)\n```\n\n##### Parameters\n\n- `id`: `{String}`\n  - A string representing the ID of the `Flickity` instance to move.\n- `isWrapped`: `{Bool}` _optional_\n  - Default: `false`\n  - If `true` and `next` is called when on the last slide, the slider will wrap back to show slide 1.\n  - If `false` and `next` is called when on the last slide, the slider will do nothing.\n- `isInstant`: `{Bool}` _optional_\n  - Default: `false`\n  - If `true` the slide will change instantly with no animation.\n\n##### Returns `Promise`\n\n- `instance`: `{Object}`\n\n\n#### `cellSelect`\n\nSelect a slide of a cell.\n\n```javascript\nFlickityService.cellSelect(id, value, isWrapped, isInstant)\n```\n\n##### Parameters\n\n- `id`: `{String}`\n  - A string representing the ID of the `Flickity` instance to move.\n- `value`: `{Integer|String}`\n  - Zero-based index OR selector string of the cell to select.\n- `isWrapped`: `{Bool}` _optional_\n  - Default: `false`\n  - If `true` and `previous` is called when on the first slide, the slider will wrap around to show\n      the last slide.\n  - If `true` and `next` is called when on the last slide, the slider will wrap back to show slide 1.\n- `isInstant`: `{Bool}` _optional_\n  - Default: `false`\n  - If `true` the slide will change instantly with no animation.\n\n##### Returns `Promise`\n\n- `instance`: `{Object}`\n\n\n\n### Sizing and Positioning\n\n#### `resize`\n\nTriggers Flickity to resize the gallery and re-position cells.\n\n```javascript\nFlickityService.resize(id)\n```\n\n- `id`: `{String}`\n  - A string representing the ID of the `Flickity` instance.\n\n##### Returns `Promise`\n\n- `instance`: `{Object}`\n\n\n#### `reposition`\n\nTell Flickity to reposition cells while retaining the current index. Useful if cell sizes change\nafter initialization.\n\n```javascript\nFlickityService.reposition(id)\n```\n\n- `id`: `{String}`\n  - A string representing the ID of the `Flickity` instance.\n\n##### Returns `Promise`\n\n- `instance`: `{Object}`\n\n\n### Adding and Removing Cells\n\n\u003e Note: If you are trying to add cell(s) by appending to a 'slides' array and then reinitializing\n\u003e the slider, take a look at this [:tv: demo][demo_inject_slide]\n\n#### `prepend`\n\nCreate cells at the beginning of the gallery and prepend elements.\n\n```javascript\nFlickityService.prepend(id, elements)\n```\n\n- `id`: `{String}`\n  - A string representing the ID of the `Flickity` instance.\n- `elements`: `{Object|Array|Element|NodeList}`\n  - jQuery object, Array of Elements, Element, or NodeList\n\n##### Returns `Promise`\n\n- `instance`: `{Object}`\n\n\n#### `append`\n\nCreate cells at the end of the gallery and append elements.\n\n```javascript\nFlickityService.append(id, elements)\n```\n\n- `id`: `{String}`\n  - A string representing the ID of the `Flickity` instance.\n- `elements`: `{Object|Array|Element|NodeList}`\n  - jQuery object, Array of Elements, Element, or NodeList\n\n##### Returns `Promise`\n\n- `instance`: `{Object}`\n\n\n#### `insert`\n\nInsert elements into the gallery and create cells at the desired index.\n\n```javascript\nFlickityService.insert(id, elements, index)\n```\n\n- `id`: `{String}`\n  - A string representing the ID of the `Flickity` instance.\n- `elements`: `{Object|Array|Element|NodeList}`\n  - jQuery object, Array of Elements, Element, or NodeList\n- `index`: `{Integer}`\n  - Zero based integer where the new slides should be inserted.\n\n##### Returns `Promise`\n\n- `instance`: `{Object}`\n\n\n### `remove`\n\nRemove cells from the gallery and remove the elements from DOM.\n\n```javascript\nFlickityService.remove(id, elements)\n```\n\n- `id`: `{String}`\n  - A string representing the ID of the `Flickity` instance.\n- `elements`: `{Object|Array|Element|NodeList}`\n  - jQuery object, Array of Elements, Element, or NodeList\n\n##### Returns `Promise`\n\n- `instance`: `{Object}`\n\n\n### Utilities\n\n#### `destroy`\n\nDestroys a `Flickity` instance.\n\n```javascript\nFlickityService.destroy(id)\n```\n\n##### Parameters\n\n- `id`: `{String}`\n  - A string representing the ID of the `Flickity` instance to be destroyed.\n\n##### Returns `Promise`\n\n- `isDestroyed`: `{Bool}`\n\nThis is very useful when your Flickity instance is created inside a controller attached to a route.\nEach time the route is hit, the route's controller calls to create a new Flickity instance. But if\nthat instance already exists, it will cause an error. The correct way to handle this is to destroy\nthe Flickity instance when the controller is being destroyed.\n\n```javascript\n$scope.$on('$destroy', () =\u003e {\n  FlickityService.destroy(instanceId);\n});\n```\n\n\n#### `reloadCells`\n\nRe-collect all cell elements in `flickity-slider`.\n\n```javascript\nFlickityService.reloadCells(id)\n```\n\n- `id`: `{String}`\n  - A string representing the ID of the `Flickity` instance.\n\n##### Returns `Promise`\n\n- `instance`: `{Object}`\n\n\u003e Note: If you are trying to add cell(s) by appending to a 'slides' array and then reinitializing\n\u003e the slider, take a look at this [:tv: demo][demo_inject_slide]\n\n#### `getCellElements`\n\nGet the elements of the cells.\n\n```javascript\nFlickityService.getCellElements(id)\n```\n\n- `id`: `{String}`\n  - A string representing the ID of the `Flickity` instance.\n\n##### Returns `Promise`\n\n- `cellElements`: `{Array}`\n\n\n#### `get`\n\nReturn a `Flickity` instance found by ID.\n\n```javascript\nFlickityService.get(id)\n```\n\n- `id`: `{String}`\n  - A string representing the ID of the `Flickity` instance.\n\n##### Returns `Promise`\n\n- `instance`: `{Object}`\n\n\n#### `getFirst`\n\nReturn the first `Flickity` instance.\n\n```javascript\nFlickityService.getFirst()\n```\n\n##### Returns `Promise`\n\n- `instance`: `{Object}`\n\n\n#### `getByElement`\n\nFind a `Flickity` instance by element or selector string.\n\n```javascript\nFlickityService.getByElement(id, element)\n```\n\n- `id`: `{String}`\n  - A string representing the ID of the `Flickity` instance.\n- `element`: `{Element}`\n  - Element or selector string representing the `Flickity` instance.\n\n##### Returns `Promise`\n\n- `instance`: `{Object}`\n\n\n### Properties\n\n### `selectedIndex`\n\nGet the index of the slide currently in view.\n\n```javascript\nFlickityService.selectedIndex(id)\n```\n\n- `id`: `{String}`\n  - A string representing the ID of the `Flickity` instance for which you need the index.\n\n##### Returns `Promise`\n\n- `selectedIndex`: `{Number}`\n  - The index of the currently visible slide.\n\n\n### `selectedElement`\n\nGet the currently selected cell element.\n\n```javascript\nFlickityService.selectedElement(id)\n```\n\n- `id`: `{String}`\n  - A string representing the ID of the `Flickity` instance.\n\n##### Returns `Promise`\n\n- `selectedElement`: `{Element}`\n\n\n### `cells`\n\nGet all cells.\n\n\u003e [:tv: Get all cells demo][demo_service_select]\n\n```javascript\nFlickityService.cells(id)\n```\n\n- `id`: `{String}`\n  - A string representing the ID of the `Flickity` instance.\n\n##### Returns `Promise`\n\n- `cells`: `{Array}`\n\n\n- - -\n\n\n## Events\n\nAll events trigger an associated `$emit` on `$rootScope`.\n\n\u003e [:tv: Events demo][demo_events]\n\n\u003e _Learn more in the [Angular docs on `$emit`][emit]._\n\nEach `$emit` event is named in this format: `Flickity:[instanceId]:[eventName]`\n\nSo, for example, if you had declared a [custom ID](#id) of `myCustomId` on `bc-flickity` and wanted\nto know when the `settle` event occurs, you could listen for it like this:\n\n```javascript\n// Assume the gallery has been initialized with the custom ID of `myCustomId`\nconst settle = $rootScope.$on('Flickity:myCustomId:settle', (event, data) =\u003e {\n    console.log('Flickity just settled!', event, data);\n});\n```\n\n\n### Events and Parameters\n\n\u003e For more information on individual events, check out the [Flickity Documentation on Events][flickity_events].\n\n```javascript\n// Legend\n• eventName\n  • parameter\n```\n\n- `select`\n- `scroll`\n  - `progress`\n  - `positionX`\n- `settle`\n- `dragStart`\n  - `event`\n  - `pointer`\n- `dragMove`\n  - `event`\n  - `pointer`\n  - `moveVector`\n- `dragEnd`\n  - `event`\n  - `pointer`\n- `pointerDown`\n  - `event`\n  - `pointer`\n- `pointerMove`\n  - `event`\n  - `pointer`\n  - `moveVector`\n- `pointerUp`\n  - `event`\n  - `pointer`\n- `staticClick`\n  - `event`\n  - `pointer`\n  - `cellElement`\n  - `cellIndex`\n- `lazyLoad`\n  - `event`\n  - `cellElement`\n\n\n#### Event Naming Convention\n\n**`eventName` =\u003e `Flickity:instanceId:eventName`**\n\n| Event name | `$emit` name |\n|------------|--------------|\n|`select`|`Flickity:instanceId:select`|\n|`scroll`|`Flickity:instanceId:scroll`|\n|`settle`|`Flickity:instanceId:settle`|\n|`dragStart`|`Flickity:instanceId:dragStart`|\n|`dragMove`|`Flickity:instanceId:dragMove`|\n|`dragEnd`|`Flickity:instanceId:dragEnd`|\n|`pointerDown`|`Flickity:instanceId:pointerDown`|\n|`pointerMove`|`Flickity:instanceId:pointerMove`|\n|`pointerUp`|`Flickity:instanceId:pointerUp`|\n|`staticClick`|`Flickity:instanceId:staticClick`|\n|`lazyLoad`|`Flickity:instanceId:lazyLoad`|\n\n\u003e _Learn more about [Flickity events][flickity_events]._\n\n\n**Don't forget:**\n\nThe `$on` call should always be assigned to a variable. This allows it to be destroyed during the\n`$scope` cleanup.\n\n\u003e _Learn more about [$destroy][destroy]._\n\n- - -\n\n\n## Demos\n\n- [All demos][demo_collection]\n- [Simple][demo_basic]\n- [Multiple instances on a page][demo_multiple_instances]\n- [Using events][demo_events]\n- [Using the service and selecting a cell][demo_service_select]\n- [Create via the service and loading remote data][demo_create_remote_docready]\n- [Inject a slide][demo_inject_slide]\n- [bgLazyLoad][demo_bglazyload]\n\n\n## Development\n\n* `npm run build`\n  - Produces uncompressed (`.js`) and minified (`.min.js`) versions of the library under the `dist` folder.\n* `npm run watch`\n  - Watches for changes inside `/src` and calls `npm run build` when changes are detected.\n* `npm run test`\n  - Runs all tests.\n* `npm run watch:tests`\n  - Watch for changes and re-run tests.\n\n## About Flickity\n\n\u003e _Touch, responsive, flickable galleries._\n\nMade by [Metafizzy][metafizzy] who make seriously [awesome][packery], [stuff][isotope].\n\n- [Flickity on Github][flickity]\n- [Flickity Documentation][flickity_docs]\n- [Flickity Licensing][flickity_license]\n\n\n\n[issues]: https://github.com/benjamincharity/angular-flickity/issues\n[flickity_api]: http://flickity.metafizzy.co/api.html\n[flickity_options]: http://flickity.metafizzy.co/options.html\n[flickity_events]: http://flickity.metafizzy.co/api.html#events\n[flickity]: https://github.com/metafizzy/flickity\n[flickity_docs]: http://flickity.metafizzy.co\n[source]: https://github.com/benjamincharity/angular-flickity/tree/master/src\n[emit]: https://docs.angularjs.org/api/ng/type/$rootScope.Scope#$emit\n[destroy]: https://docs.angularjs.org/api/ng/type/$rootScope.Scope#$destroy\n[desandro]: http://desandro.com\n[metafizzy]: http://metafizzy.co/\n[packery]: http://packery.metafizzy.co/\n[isotope]: http://isotope.metafizzy.co/\n[flickity_license]: http://flickity.metafizzy.co/license.html\n[angular]: https://angularjs.org\n[flickity_imagesloaded]: https://github.com/metafizzy/flickity-imagesloaded\n[flickity-bg-lazyload]: https://github.com/metafizzy/flickity-bg-lazyload\n\n[demo_collection]: http://codepen.io/collection/nNzQxk/\n[demo_basic]: http://codepen.io/benjamincharity/pen/amxVaV?editors=1000\n[demo_multiple_instances]: http://codepen.io/benjamincharity/pen/dpEqoj?editors=1000\n[demo_events]: http://codepen.io/benjamincharity/pen/yaWxor?editors=0010\n[demo_service_select]: http://codepen.io/benjamincharity/pen/KgLxRW?editors=0010\n[demo_create_remote_docready]: http://codepen.io/benjamincharity/pen/NRVLEb?editors=0010\n[demo_inject_slide]: http://codepen.io/benjamincharity/pen/qaGJmW?editors=0010\n[demo_bglazyload]: http://codepen.io/kukac7/pen/vyXjBp\n\n[license_image]: http://img.shields.io/badge/license-MIT-blue.svg\n[license_url]: LICENSE\n[npm_url]: https://npmjs.org/package/angular-flickity\n[npm_version_image]: http://img.shields.io/npm/v/angular-flickity.svg\n[coverage_image]: https://coveralls.io/repos/github/benjamincharity/angular-flickity/badge.svg\n[coverage_url]: https://coveralls.io/github/benjamincharity/angular-flickity\n[circle_badge]: https://circleci.com/gh/benjamincharity/angular-flickity/tree/master.svg?style=svg\n[circle_link]: https://circleci.com/gh/benjamincharity/angular-flickity/tree/master\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbenjamincharity%2Fangular-flickity","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbenjamincharity%2Fangular-flickity","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbenjamincharity%2Fangular-flickity/lists"}