Skip to content
master
Go to file
Code

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 

README.md

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.

// 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 & 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.

/* 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 🌈🐻

About

Enable fullscreen view for Flickity carousels

Resources

Packages

No packages published
You can’t perform that action at this time.