flickity-fullscreen
Version:
Enable fullscreen view of Flickity carousels
104 lines (82 loc) • 2.58 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>corner button</title>
<link rel="stylesheet" href="../node_modules/flickity/css/flickity.css" />
<link rel="stylesheet" href="../fullscreen.css" />
<style>
* { box-sizing: border-box; }
body {
font-family: sans-serif;
padding: 0;
margin: 0;
}
body.is-toggled { background: #19F; }
.carousel {
background: #FAFAFA;
}
.carousel-cell {
width: 66%;
height: 200px;
margin-right: 10px;
background: #8C8;
border-radius: 5px;
counter-increment: carousel-cell;
}
.carousel.is-fullscreen .carousel-cell {
height: 100%;
margin-top: 50px;
}
/* cell number */
.carousel-cell:before {
display: block;
text-align: center;
content: counter(carousel-cell);
line-height: 200px;
font-size: 80px;
color: white;
}
.corner-button {
font-size: 32px;
}
</style>
</head>
<body>
<div style="text-align: right;">
<button class="corner-button">Corner button</button>
</div>
<div class="carousel">
<div class="carousel-cell"></div>
<div class="carousel-cell"></div>
<div class="carousel-cell"></div>
<div class="carousel-cell"></div>
<div class="carousel-cell"></div>
</div>
<script src="../node_modules/get-size/get-size.js"></script>
<script src="../node_modules/ev-emitter/ev-emitter.js"></script>
<script src="../node_modules/fizzy-ui-utils/utils.js"></script>
<script src="../node_modules/unidragger/unidragger.js"></script>
<script src="../node_modules/flickity/js/cell.js"></script>
<script src="../node_modules/flickity/js/slide.js"></script>
<script src="../node_modules/flickity/js/animate.js"></script>
<script src="../node_modules/flickity/js/core.js"></script>
<script src="../node_modules/flickity/js/drag.js"></script>
<script src="../node_modules/flickity/js/prev-next-button.js"></script>
<script src="../node_modules/flickity/js/page-dots.js"></script>
<script src="../node_modules/flickity/js/add-remove-cell.js"></script>
<script src="../node_modules/flickity/js/player.js"></script>
<script src="../node_modules/flickity/js/lazyload.js"></script>
<script src="../fullscreen.js"></script>
<script>
var flkty = new Flickity( '.carousel', {
fullscreen: true,
});
var cornerButton = document.querySelector('.corner-button');
cornerButton.onclick = function() {
document.body.classList.toggle('is-toggled');
}
</script>
</body>
</html>