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!

All versions