# flickity-as-nav-for

> Enable asNavFor for Flickity

Latest version **3.0.0** (published 2022-03-06) · MIT license · 0 weekly downloads

## Install

```sh
npm install flickity-as-nav-for
pnpm add flickity-as-nav-for
yarn add flickity-as-nav-for
bun add flickity-as-nav-for
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 3.0.0 |
| Published | 2022-03-06 |
| First published | 2015-02-07 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 25.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 31 |
| Author | David DeSandro |
| Maintainers | desandro |
| Keywords | flickity, browser, DOM |

## Links

- npm: https://www.npmjs.com/package/flickity-as-nav-for
- Repository: https://github.com/desandro/flickity-as-nav-for
- Issues: https://github.com/desandro/flickity-as-nav-for/issues
- npm.io page: https://npm.io/package/flickity-as-nav-for

## Dependencies (1)

- [fizzy-ui-utils](https://npm.io/package/fizzy-ui-utils.md) ^3.0.0

## Alternatives

- [babylon](https://npm.io/package/babylon.md) — 5.1M weekly downloads
- [csscolorparser](https://npm.io/package/csscolorparser.md) — 3.7M weekly downloads
- [expr-eval-fork](https://npm.io/package/expr-eval-fork.md) — 1.5M weekly downloads
- [@leeoniya/ufuzzy](https://npm.io/package/@leeoniya/ufuzzy.md) — 247.7K weekly downloads
- [xml-parser](https://npm.io/package/xml-parser.md) — 78.4K weekly downloads

## Recent versions

- 3.0.0 (latest) — 2022-03-06
- 2.0.1 — 2016-07-21
- 2.0.0 — 2016-07-08
- 1.0.4 — 2016-03-18
- 1.0.3 — 2016-03-18
- 1.0.2 — 2015-06-18
- 1.0.1 — 2015-03-07
- 1.0.0 — 2015-02-26
- 0.2.0 — 2015-02-19
- 0.1.1 — 2015-02-09
- 0.1.0 — 2015-02-07

## README

# Flickity asNavFor

Enables `asNavFor` option for [Flickity](https://flickity.metafizzy.co/), where one gallery is navigation or another.

+ Clicking the nav gallery will select the content gallery
+ Selecting the content gallery will sync to the nav gallery

``` html
<div class="gallery gallery-a">
  ...
</div>
<div class="gallery gallery-b">
  ...
</div>
```

``` js
// options
asNavFor: '.gallery-a'
// set as a selector string

asNavFor: document.querySelector('.gallery-a')
// set as an element
```

## Install

Add `as-nav-for.js` to your scripts, after including Flickity.

### Download

+ [as-nav-for.js](https://unpkg.com/flickity-as-nav-for@2/as-nav-for.js)

### CDN

``` html
<script src="https://unpkg.com/flickity-as-nav-for@2/as-nav-for.js"></script>
```

### Package managers

npm: `npm install flickity-as-nav-for`

Yarn: `yarn add flickity-as-nav-for`

## Usage

### jQuery

``` js
$('.gallery-a').flickity();
$('.gallery-b').flickity({
  asNavFor: '.gallery-a'
});
```

### Vanilla JS

``` js
var flktyA = new Flickity('.gallery-a');
var flktyB = new Flickity( '.gallery-b', {
  asNavFor: '.gallery-a'
});
```

### HTML

``` html
<div class="gallery gallery-a js-flickity">
  ...
</div>
<div class="gallery gallery-b js-flickity"
  data-flickity-options='{ "asNavFor": ".gallery-a" }'>
  ...
</div>
```

## Install

Bower: `bower install flickity-as-nav-for --save`

npm: `npm install flickity-as-nav-for`

### Webpack

``` js
const Flickity = require('flickity');
require('flickity-as-nav-for');

var flktyA = new Flickity('.gallery-a');
var flktyB = new Flickity( '.gallery-b', {
  asNavFor: '.gallery-a'
});
```

---

MIT license

By [Metafizzy](https://metafizzy.co)

---
_Source: https://npm.io/package/flickity-as-nav-for · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._