Metafizzy Metafizzy

Blog
Archive RSS

Flickity v2.1: fullscreen, hash, & more

23 Mar 2018 · by David DeSandro

Flickity

Happy birthday Flickity! 3 years old! Flickity has grown to be Metafizzy's second most popular library. As such, it deserved some new goodies in a big new release, v2.1.

Fullscreen

View Flickity fullscreen by enabling fullscreen. Click the fullscreen button to resize the carousel to take up the entire browser window. Now you don't need a separate library to zoom images. ENHANCE.

Hit ESC to exit fullscreen. Flickity fullscreen comes with its own API with viewFullscreen and exitFullscreen methods.

This feature was a long time coming. It was first requested while Flickity was still in beta. The issue gained close to a hundred 👍 over the years. I'm delighted to finally ship it.

URL hash

Select slides with URLs with hash. This works both ways: clicking on hash links like <a href="#carousel-cell2"> will select matching the #carousel-cell2 element, and selecting a new slide will change the page URL to the selected cell's id. So you can share URLs to specific slides.

Both fullscreen and hash are add-on features. They are maintained as separate projects outside of Flickity, so the Flickity source code doesn't get bloated with new features. You can choose to add these features by adding their scripts to your project. See flickity-fullscreen and flickity-hash on GitHub.

lazyLoad srcset

Lazy-load images with srcset by setting the data-flickity-lazyload-srcset attribute. You can also set data-flickity-lazyload-src as well to set src as a fallback.

<img data-flickity-lazyload-srcset="
    walrus-large.jpg 720w,
    walrus-med.jpg 360w"
  sizes="(min-width: 1024px) 720px, 360px"
  data-flickity-lazyload-src="walrus-large.jpg"
  />

change event

Flickity's select event is triggered any time a slide is selected. But it will trigger even if the same slide is selected. Flickity v2.1 now has the change event, which will only be triggered when the selected slide has changed.

$carousel.on( 'change.flickity', function( event, index ) {
  console.log( 'Slide changed to ' + index )
});

And more!

  • Added draggable: '>1' option setting (now default) to disable dragging if only one slide.
  • Added ready event. Added on option to capture initial events.
  • Enabled staticClick event when not draggable.
  • Bug fixes with prepend, remove, and wrapAround.

Read the v2.1.0 release notes for details.

With these features, Flickity is now perfect... Naw. You can continue to help me select new features by looking over requested features on the GitHub issue tracker and adding your 👍 reaction.