.screen
	.carousel
		.page.red
			h1 1
		.page.green
			h1 2
		.page.yellow
			h1 3
		.page.blue
			h1 4
		.page.red
			h1 5
		.page.green
			h1 6
		.page.yellow
			h1 7
		.page.blue
			h1 8
View Compiled
body
	background-color: #239DFF
	display: flex
	flex-direction: column
	justify-content: center
	align-items: center
	height: 100vh
	background-image: url(http://media.idownloadblog.com/wp-content/uploads/2016/06/macOS-Sierra-Wallpaper-Macbook-Wallpaper.jpg)
	background-position: center center
	background-size: cover
.screen
	border: 2px solid #333
	max-width: 600px
	max-height: 568px
	width: 100vw
	height: 100vh
	overflow: hidden
	border-radius: 4 px
	background-color: #333
	display: flex
	background-image: url(https://www.thestorybookfactory.com/assets/icons/doodle-bg-1.svg)
	flex-direction: column
	justify-content: center
	align-items: center
	backdrop-filter: blur(30px)
	box-shadow: 0px 30px 60px rgba(#000,0.4)

.flickity-viewport
	height: 100% !important
	

.flickity-page-dots
	display: flex
	bottom: 70px
	border-radius: 50px
	overflow: hidden
	.dot
		background-color: #000 !important
		opacity: 0.2
		flex: 1
		margin: 0px 20px !important
		// width: 50px !important
		border-radius: 5px !important
		&.is-selected
			opacity: 1
			background-color: #fff !important

.flickity-prev-next-button
	bottom: 15px
	top: auto
	background-color: #fff !important
	transition: all 0.3s ease
	border-radius: 4px
	transform: translateY(0px)
	width: calc(50% - 15px) !important
	&:disabled
		opacity: 0 !important
		transform: translateY(50px)

.carousel
	width: 100%
	// height: calc(100% - 60px)
	height: 100%
	perspective: 300px
	.page
		width: 100%
		height: 100%
		display: flex
		flex-direction: column
		justify-content: center
		align-items: center
		color: #fff
		transition: transform 0.3s ease
		box-shadow: inset 0px 0px 0px 2px rgba(#000,0.15)
.red
	background-color: #D75A4A
.green
	background-color: #8EE177
.yellow
	background-color: #FFD045
.blue
	background-color: #5599F0



button.button
	background-color: #fff
	border-radius: 3px
	border: none
	padding: 10px
	margin: 10px 0px
	flex: 1
	width: 280px
	height: 40px
	position: absolute
	bottom: 0px
	
View Compiled
console.clear()
var $carousel = $('.carousel').flickity({
	// selectedAttraction: 0.3,
	// friction: 0.6
})
Run Pen

External CSS

  1. https://unpkg.com/flickity@2.0.5/dist/flickity.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js
  2. https://unpkg.com/flickity@2.0.5/dist/flickity.pkgd.min.js