Flickity fullscreen
Enable fullscreen view for Flickity carousels
Install
Add fullscreen.css
to your stylesheets and fullscreen.js
to your scripts.
Download
CDN
<link rel="stylesheet" href="https://unpkg.com/flickity-fullscreen@1/fullscreen.css">
<script src="https://unpkg.com/flickity-fullscreen@1/fullscreen.js"></script>
Package managers
npm: npm install flickity-fullscreen
Bower: bower install flickity-fullscreen
Usage
Enable fullscreen behavior by setting fullscreen: true
in Flickity options.
var $carousel = $('.carousel').flickity({
fullscreen: true,
});
var flkty = $('.carousel').flickity({
fullscreen: true,
});
<div class="carousel" data-flickity='{ "fullscreen": true }'>
...
</div>
Webpack & Browserify
var Flickity = require('flickity-fullscreen');
var flkty = new Flickity( '.carousel', {
fullscreen: true,
});
RequireJS
requirejs( [ 'path/to/flickity-fullscreen' ], function( Flickity ) {
var flkty = new Flickity( '.carousel', {
fullscreen: true,
});
});
Style
.is-fullscreen
is added to the carousel when fullscreen.
Size cells to take up full height with CSS.
.carousel-cell {
height: 200px;
}
.carousel.is-fullscreen .carousel-cell {
height: 100%;
}
Methods
viewFullscreen
Expand carousel to fullscreen.
$carousel.flickity('viewFullscreen');
flkty.viewFullscreen();
exitFullscreen
Collapse carousel from fullscreen back to normal size & position.
$carousel.flickity('exitFullscreen');
flkty.exitFullscreen();
toggleFullscreen
Expand or collapse carousel fullscreen view.
$carousel.flickity('toggleFullscreen');
flkty.toggleFullscreen();
Events
fullscreenChange
Triggered after entering or exiting the fullscreen view.
$carousel.on( 'fullscreenChange.flickity', function( event, isFullscreen ) {...} );
flkty.on( 'fullscreenChange', function( isFullscreen ) {...} );
event
· Event · jQuery event
objectisFullscreen
· Boolean · true
if viewing fullscreen, false
if exiting fullscreen
By Metafizzy 🌈🐻