https://github.com/metafizzy/flickity-as-nav-for
Enable asNavFor for Flickity
https://github.com/metafizzy/flickity-as-nav-for
Last synced: 6 months ago
JSON representation
Enable asNavFor for Flickity
- Host: GitHub
- URL: https://github.com/metafizzy/flickity-as-nav-for
- Owner: metafizzy
- Created: 2015-02-07T14:28:30.000Z (over 11 years ago)
- Default Branch: master
- Last Pushed: 2023-07-19T10:57:44.000Z (almost 3 years ago)
- Last Synced: 2025-11-11T04:24:19.364Z (7 months ago)
- Language: HTML
- Size: 61.5 KB
- Stars: 31
- Watchers: 3
- Forks: 13
- Open Issues: 9
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
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
...
...
```
``` 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@3/as-nav-for.js)
### CDN
``` html
```
### 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
...
...
```
## 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)