JSFiddle - React, Tailwind, and code Playground

by matox

HTML

<link rel="stylesheet" href="https://unpkg.com/flickity@2/dist/flickity.min.css">
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/tailwind.min.css">
<script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/alpinejs/[email protected]/dist/alpine.min.js"></script>
<main class="text-white flex items-center justify-center" x-data="carouselFilter()">
  <div class="container grid grid-cols-1">
    
    <div class="row-start-2 col-start-1"
         x-show="active == 0"
         x-transition:enter="transition ease-out duration-300"
         x-transition:enter-start="opacity-0 transform scale-90"
         x-transition:enter-end="opacity-100 transform scale-100"
         x-transition:leave="transition ease-in duration-300"
         x-transition:leave-start="opacity-100 transform scale-100"
         x-transition:leave-end="opacity-0 transform scale-90"
    >
      <div class="grid grid-cols-1 grid-rows-1" x-data="carousel()" x-init="init()">

        <div class="carousel col-start-1 row-start-1" x-ref="carousel">
          <div class="w-3/5 px-2">
            <img
              src="https://images.unsplash.com/photo-1581375221876-8f287f7cd2cc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=770&q=80"
              loading="lazy">
          </div>
          <div class="w-3/5 px-2">
            <img
              src="https://images.unsplash.com/photo-1581375279144-bb3b381c7046?ixlib=rb-1.2.1&auto=format&fit=crop&w=770&q=80"
              loading="lazy">
          </div>
          <div class="w-3/5 px-2">
            <img
              src="https://images.unsplash.com/photo-1581375303816-4a17124934f7?ixlib=rb-1.2.1&auto=format&fit=crop&w=770&q=80"
              loading="lazy">
          </div>
          <div class="w-3/5 px-2">
            <img
              src="https://images.unsplash.com/photo-1494253109108-2e30c049369b?ixlib=rb-1.2.1&auto=format&fit=crop&w=770&q=80"
           ...

JavaScript

const carousel = () => {
  return {
    active: 0,
    init() {
      var flkty = new Flickity(this.$refs.carousel, {
        wrapAround: true
      });
      flkty.on('change', i => this.active = i);
    }
  }
}

const carouselFilter = () => {
  return {
    active: 0,
    changeActive(i) {
      this.active = i;
      
      this.$nextTick(() => {
        let flkty = Flickity.data( this.$el.querySelectorAll('.carousel')[i] );
        flkty.resize();
        
        console.log(flkty);
      });
    }
  }
}