Flickity fullscreen
Enable fullscreen view for Flickity carousels
Install
Add fullscreen.css
to your stylesheets and fullscreen.js
to your scripts.
Download
CDN
Package managers
npm: npm install pu-flickity-fullscreen
Bower: bower install pu-flickity-fullscreen
Usage
Enable fullscreen behavior by setting fullscreen: true
in Flickity options.
// jQueryvar $carousel =;
// vanilla JSvar flkty =;
<!-- HTML -->...
Webpack & Browserify
var Flickity = ;var flkty = '.carousel'fullscreen: true;
RequireJS
;
Style
.is-fullscreen
is added to the carousel when fullscreen.
Size cells to take up full height with CSS.
/* normal */ /* fullscreen */
Methods
viewFullscreen
Expand carousel to fullscreen.
// jQuery$carousel;// vanilla JSflkty;
exitFullscreen
Collapse carousel from fullscreen back to normal size & position.
// jQuery$carousel;// vanilla JSflkty;
toggleFullscreen
Expand or collapse carousel fullscreen view.
// jQuery$carousel;// vanilla JSflkty;
Events
fullscreenChange
Triggered after entering or exiting the fullscreen view.
// jQuery$carousel;// vanilla JSflkty;
event
· Event · jQueryevent
objectisFullscreen
· Boolean ·true
if viewing fullscreen,false
if exiting fullscreen
By Metafizzy 🌈🐻