JSFiddle - React, Tailwind, and code Playground

by batcave

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/flickity/2.2.0/flickity.pkgd.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/flickity@2/dist/flickity.css">
<div class="container">
  <div class="carousel-single js-carousel-single">
    <div class="carousel-single__cell"></div>
    <div class="carousel-single__cell"></div>
    <div class="carousel-single__cell"></div>
    <div class="carousel-single__cell"></div>
    <div class="carousel-single__cell"></div>
    <div class="carousel-single__cell"></div>
  </div>

  <div class="carousel js-carousel">
    <div class="carousel__cell"></div>
    <div class="carousel__cell"></div>
    <div class="carousel__cell"></div>
    <div class="carousel__cell"></div>
    <div class="carousel__cell"></div>
    <div class="carousel__cell"></div>
  </div>
</div>

SCSS

/* external css: flickity.css */

* {
  box-sizing: border-box;
}

body {
  font-family: sans-serif;
}

.container {
  width: 33.125rem;
  margin: 4rem auto;
  padding: 1rem;
  background-color: coral;
}

.carousel-single {
  
}

.carousel-single__cell {
  width: 100%;
  height: 200px;
  margin-right: 0;
  background: #8c8;
  counter-increment: carousel-cell;  
}

.carousel-single__cell:after {
  display: block;
  text-align: center;
  content: counter(carousel-cell);
  line-height: 200px;
  font-size: 80px;
  color: white;
}

.carousel {
  background: #fafafa;
  margin: 0 2rem;
  padding: .25rem;
}

.carousel__cell {
  width: 10.25rem;
  height: 6.25rem;
  margin-right: .5rem;
  background: deepskyblue;
  counter-increment: carousel-cell;
}

/* cell number */
.carousel__cell:after {
  display: flex;
  align-items: center;
  justify-content: center;
  content: counter(carousel-cell);
  width: 100%;
  height: 100%;
  font-size: 16px;
  color: white;
}

JavaScript

// external js: flickity.pkgd.js

var flktya = new Flickity( '.js-carousel-single');

var flktyb = new Flickity( '.js-carousel', {
  asNavFor: document.querySelector('.js-carousel-single'),
  pageDots: false,
  cellAlign: 'left',
  prevNextButtons: false
});