https://github.com/metafizzy/flickity-fullscreen
Enable fullscreen view for Flickity carousels
https://github.com/metafizzy/flickity-fullscreen
Last synced: 6 months ago
JSON representation
Enable fullscreen view for Flickity carousels
- Host: GitHub
- URL: https://github.com/metafizzy/flickity-fullscreen
- Owner: metafizzy
- Created: 2018-03-17T00:34:07.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2023-07-19T10:55:30.000Z (almost 3 years ago)
- Last Synced: 2024-04-26T04:01:01.684Z (about 2 years ago)
- Language: HTML
- Size: 217 KB
- Stars: 44
- Watchers: 6
- Forks: 17
- Open Issues: 21
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
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](https://unpkg.com/flickity-fullscreen@2/fullscreen.css)
+ [fullscreen.js](https://unpkg.com/flickity-fullscreen@2/fullscreen.js)
### CDN
``` html
```
``` html
```
### Package managers
npm: `npm install flickity-fullscreen`
Yarn: `yarn add flickity-fullscreen`
## Usage
Enable fullscreen behavior by setting `fullscreen: true` in Flickity options.
``` js
// jQuery
var $carousel = $('.carousel').flickity({
fullscreen: true,
});
```
``` js
// vanilla JS
var flkty = $('.carousel').flickity({
fullscreen: true,
});
```
``` html
...
```
### Webpack
``` js
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.
```css
/* normal */
.carousel-cell {
height: 200px;
}
/* fullscreen */
.carousel.is-fullscreen .carousel-cell {
height: 100%;
}
```
## Methods
### viewFullscreen
Expand carousel to fullscreen.
``` js
// jQuery
$carousel.flickity('viewFullscreen');
// vanilla JS
flkty.viewFullscreen();
```
### exitFullscreen
Collapse carousel from fullscreen back to normal size & position.
``` js
// jQuery
$carousel.flickity('exitFullscreen');
// vanilla JS
flkty.exitFullscreen();
```
### toggleFullscreen
Expand or collapse carousel fullscreen view.
``` js
// jQuery
$carousel.flickity('toggleFullscreen');
// vanilla JS
flkty.toggleFullscreen();
```
## Events
### fullscreenChange
Triggered after entering or exiting the fullscreen view.
``` js
// 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](https://metafizzy.co) 🌈🐻