metafizzy/flickity-fullscreen

Name: flickity-fullscreen

Owner: Metafizzy

Description: Enable fullscreen view for Flickity carousels

Created: 2018-03-17 00:34:07.0

Updated: 2018-05-11 20:27:14.0

Pushed: 2018-05-11 20:27:12.0

Homepage: null

Size: 10

Language: HTML

GitHub Committers

User	Most Recent Commit	# Commits

Other Committers

User	Email	Most Recent Commit	# Commits

README

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

k rel="stylesheet" href="https://unpkg.com/flickity-fullscreen@1/fullscreen.css">

html
ipt 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.

Query
$carousel = $('.carousel').flickity({
llscreen: true,

js
anilla JS
flkty = $('.carousel').flickity({
llscreen: true,

html
 HTML -->
 class="carousel" data-flickity='{ "fullscreen": true }'>
.
v>

Webpack & Browserify

Flickity = require('flickity-fullscreen');

flkty = new Flickity( '.carousel', {
llscreen: true,

RequireJS

irejs( [ 'path/to/flickity-fullscreen' ], function( Flickity ) {
r 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.

ormal */
ousel-cell {
ight: 200px;


ullscreen */
ousel.is-fullscreen .carousel-cell {
ight: 100%;

Methods

viewFullscreen

Expand carousel to fullscreen.

Query
ousel.flickity('viewFullscreen');

anilla JS
y.viewFullscreen();

exitFullscreen

Collapse carousel from fullscreen back to normal size & position.

Query
ousel.flickity('exitFullscreen');

anilla JS
y.exitFullscreen();

toggleFullscreen

Expand or collapse carousel fullscreen view.

Query
ousel.flickity('toggleFullscreen');

anilla JS
y.toggleFullscreen();

Events

fullscreenChange

Triggered after entering or exiting the fullscreen view.

Query
ousel.on( 'fullscreenChange.flickity', function( event, isFullscreen ) {...} );

anilla JS
y.on( 'fullscreenChange', function( event, isFullscreen ) {...} );

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

---

By Metafizzy ??