Flickity Carousel with Responsive Animated Captions, Images, Videos

Flickity Carousel with Responsive Animated Captions, Images, Videos



Star Follow @xcartmods

1 Inside <head>...

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<link rel="stylesheet" href="css/flickity.min.css">
<link rel="stylesheet" href="css/animate.min.css">
<link rel="stylesheet" href="css/lazyframe.css">
<link rel="stylesheet" href="css/style.css">

2 Inside <body>...

<div class="carousel-container">
<div class="carousel shadow">

* Put your slides here (view carousel.html source to see example code) *


3 Before </body>...

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script>
<script src="js/flickity.pkgd.min.js"></script>
<script src="js/ls.bgset.min.js"></script>
<script src="js/lazysizes.min.js"></script>
<script src="js/lazyframe.min.js"></script>
<script async defer src="https://f.vimeocdn.com/js/froogaloop2.min.js"></script><!-- Vimeo Videos Only -->
<script src="js/script.js"></script>

  • Please note, Flickity requires a license for commercial use.
  • View animate.css for animation names.
  • View Flickity for carousel options.
  • The demo has 5 background images for each Bootstrap breakpoint per slide, but you can use just one image if you prefer.
  • For YouTube videos, you'll need an API key for js/script.js which you can get here.
  • Multiple carousels on the same page is possible.