Get started with flickity CDN
GPL-3.0 licensed
Flickity is a user interface library for creating interactive, draggable components in web applications.
Tags:- gallery
- carousel
- slider
- touch
- responsive
- flick
Stable version
Copied!
How to start using flickity CDN
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
<script src="https://cdn.cdnhub.io/flickity/3.0.0/flickity.pkgd.min.js"></script>
<style>
.carousel {
width: 100%;
height: 300px;
}
.carousel-cell {
width: 200px;
height: 300px;
background-size: cover;
background-position: center;
}
</style>
</head>
<body>
<div class="carousel">
<div class="carousel-cell" style="background-image: url('image1.jpg')"></div>
<div class="carousel-cell" style="background-image: url('image2.jpg')"></div>
<div class="carousel-cell" style="background-image: url('image3.jpg')"></div>
</div>
<script>
const carousel = new Flickity('.carousel', {
cellAlign: 'left',
contain: true,
wrapAround: true,
prevNextButtons: false,
pageDots: false
});
</script>
</body>
</html>
Copied!
Copied!
Copied!
Copied!