JSFiddle - React, Tailwind, and code Playground

by Zareh Geertjes

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Glide.js/3.2.4/glide.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Glide.js/3.2.4/css/glide.core.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Glide.js/3.2.4/css/glide.theme.min.css">
<div class="glide main">
  <div class="glide__track" data-glide-el="track">
    <ul class="glide__slides">
      <li class="glide__slide">0</li>
      <li class="glide__slide">1</li>
      <li class="glide__slide">2</li>
    </ul>
  </div>
</div>

<div class="glide second">
  <div class="glide__track" data-glide-el="track">
    <ul class="glide__slides">
      <li class="glide__slide">0</li>
      <li class="glide__slide">1</li>
      <li class="glide__slide">2</li>
    </ul>
  </div>
</div>

SCSS

html,
body{
  padding: 0;
  margin: 0;
}

.glide{
  &__slide{
    background: red;
    padding: 20px;
  }
}

JavaScript

var Example = function (Glide, Components, Events) {
  return {
    modify (translate) {
      return translate + 0
    }
  }
}

var main = new Glide('.main', {
  type: 'carousel',
  autoplay: 5000,
  hoverpause: true,
}).mount();

var second = new Glide('.second', {
  type: 'carousel',
  hoverpause: true,
  dragThreshold: false,
}).mutate([Example]).mount();

main.on(['mount.after', 'run'], function (e) {
  second.go(e.direction)
})