Flickity with infinite loop

by Martin Parenteau

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/flickity@2/dist/flickity.min.css">
<script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script>
<div class="carousel" data-flickity='{ "wrapAround": true }'>
  <div class="carousel-cell">1</div>
  <div class="carousel-cell">2</div>
  <div class="carousel-cell">3</div>
  <div class="carousel-cell">4</div>
  <div class="carousel-cell">5</div>
  <div class="carousel-cell">1</div>
  <div class="carousel-cell">2</div>
  <div class="carousel-cell">3</div>
  <div class="carousel-cell">4</div>
  <div class="carousel-cell">5</div>
</div>

CSS

* {
  margin: 0;
  padding: 0;
  font-size: 24px;
  text-align: center;
  color: white;
}

.carousel .carousel-cell:nth-child(odd) {
  background-color: red;
}

.carousel .carousel-cell:nth-child(even) {
  background-color: green;
}

.carousel-cell.is-selected {
  background: blue;
}

.carousel-cell {
  width: 50%; /* half-width */
  line-height: 160px;
  margin-right: 10px;
}