Skip to content

metafizzy/flickity-fullscreen

Folders and files

NameName
Last commit message
Last commit date

Latest commit

History

14 Commits

Repository files navigation

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@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 ) {...} );
  • eventEvent 路 jQuery event object
  • isFullscreenBooleantrue if viewing fullscreen, false if exiting fullscreen

By Metafizzy 馃寛馃惢