Flickity fullscreen

Enable fullscreen view for Flickity carousels

Install

Add fullscreen.css to your stylesheets and fullscreen.js to your scripts.

Download

• fullscreen.css
• fullscreen.js

CDN

<link rel="stylesheet" href="https://unpkg.com/flickity-fullscreen@2/fullscreen.css">

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

Package managers

npm: npm install flickity-fullscreen

Yarn: yarn add flickity-fullscreen

Usage

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

// jQuery
var $carousel = $('.carousel').flickity({
  fullscreen: true,
});

// vanilla JS
var flkty = $('.carousel').flickity({
  fullscreen: true,
});

<!-- HTML -->
<div class="carousel" data-flickity='{ "fullscreen": true }'>
  ...
</div>

Webpack

const Flickkty = require('flickity');
require('flickity-fullscreen');

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.

/* normal */
.carousel-cell {
  height: 200px;
}

/* fullscreen */
.carousel.is-fullscreen .carousel-cell {
  height: 100%;
}

Methods

viewFullscreen

Expand carousel to fullscreen.

// jQuery
$carousel.flickity('viewFullscreen');

// vanilla JS
flkty.viewFullscreen();

exitFullscreen

Collapse carousel from fullscreen back to normal size & position.

// jQuery
$carousel.flickity('exitFullscreen');

// vanilla JS
flkty.exitFullscreen();

toggleFullscreen

Expand or collapse carousel fullscreen view.

// jQuery
$carousel.flickity('toggleFullscreen');

// vanilla JS
flkty.toggleFullscreen();

Events

fullscreenChange

Triggered after entering or exiting the fullscreen view.

// jQuery
$carousel.on( 'fullscreenChange.flickity', function( event, isFullscreen ) {...} );

// vanilla JS
flkty.on( 'fullscreenChange', function( isFullscreen ) {...} );

• event · Event · jQuery event object
• isFullscreen · Boolean · true if viewing fullscreen, false if exiting fullscreen

By Metafizzy 🌈🐻