https://github.com/metafizzy/flickity-hash
Select Flickity slides with links
https://github.com/metafizzy/flickity-hash
Last synced: over 1 year ago
JSON representation
Select Flickity slides with links
- Host: GitHub
- URL: https://github.com/metafizzy/flickity-hash
- Owner: metafizzy
- Created: 2018-03-17T00:16:45.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2023-07-19T11:04:37.000Z (almost 3 years ago)
- Last Synced: 2025-02-17T02:11:12.546Z (over 1 year ago)
- Language: HTML
- Size: 43.9 KB
- Stars: 11
- Watchers: 4
- Forks: 10
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Flickity hash
_Select Flickity slides with links_
## Features
+ Connect hash links to select Flickity slides. `View cell 2`
+ Use URLs for slides: `https://example.com/#cell2`
+ Change page hash to match selected slide.
## Install
Add `hash.js` to your scripts.
### Download
+ [hash.js](https://unpkg.com/flickity-hash@2/hash.js)
### CDN
``` html
```
### Package managers
npm: `npm install flickity-hash`
Yarn: `yarn add flickity-hash`
## Usage
Enable hash behavior by setting `hash: true` in Flickity options.
``` js
// jQuery
let $carousel = $('.carousel').flickity({
hash: true,
});
```
``` js
// vanilla JS
let flkty = new Flickity( '.carousel', {
hash: true,
});
```
``` html
...
```
### HTML
Add `id` attributes to cell elements.
``` html
...
...
...
```
Hash links will select slides on click.
``` html
View cell 2
```
### Webpack
``` js
const Flickity = require('flickity');
require('flickity-hash');
let flkty = new Flickity( '.carousel', {
hash: true,
});
```
---
By [Metafizzy](https://metafizzy.co) 🌈🐻