Skip to content

metafizzy/flickity-hash

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

13 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

CDN

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

Package managers

npm: npm install flickity-hash

Yarn: yarn add flickity-hash

Usage

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

// jQuery
let $carousel = $('.carousel').flickity({
  hash: true,
});
// vanilla JS
let flkty = new Flickity( '.carousel', {
  hash: true,
});
<!-- HTML -->
<div class="carousel" data-flickity='{ "hash": true }'>
  ...
</div>

HTML

Add id attributes to cell elements.

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

Hash links will select slides on click.

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

Webpack

const Flickity = require('flickity');
require('flickity-hash');

let flkty = new Flickity( '.carousel', {
  hash: true,
});

By Metafizzy 🌈🐻