metafizzy/flickity-hash

Name: flickity-hash

Owner: Metafizzy

Description: Select Flickity slides with links

Created: 2018-03-17 00:16:45.0

Updated: 2018-05-22 18:19:37.0

Pushed: 2018-05-22 18:19:39.0

Homepage: null

Size: 10

Language: HTML

GitHub Committers

User	Most Recent Commit	# Commits

Other Committers

User	Email	Most Recent Commit	# Commits

README

Flickity hash

Select Flickity slides with links

Features

• Connect hash links to select Flickity slides. <a href="#cell2">View cell 2</a>
• 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

CDN

ipt src="https://unpkg.com/flickity-hash@1/hash.js"></script>

Package managers

npm: npm install flickity-hash

Bower: bower install flickity-hash

Usage

Enable hash behavior by setting hash: true in Flickity options.

Query
$carousel = $('.carousel').flickity({
sh: true,

js
anilla JS
flkty = new Flickity( '.carousel', {
sh: true,

html
 HTML -->
 class="carousel" data-flickity='{ "hash": true }'>
.
v>

HTML

Add id attributes to cell elements.

 class="carousel">
iv class="carousel-cell" id="carousel-cell1">...</div>
iv class="carousel-cell" id="carousel-cell2">...</div>
iv class="carousel-cell" id="carousel-cell3">...</div>
v>

Hash links will select slides on click.

ref="#carousel-cell2">View cell 2</a>

Webpack & Browserify

Flickity = require('flickity-hash');

flkty = new Flickity( '.carousel', {
sh: true,

RequireJS

irejs( [ 'path/to/flickity-hash' ], function( Flickity ) {
r flkty = new Flickity( '.carousel', {
hash: true,
;

---

By Metafizzy ??