JSFiddle - React, Tailwind, and code Playground

by talkhabi

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<link rel="stylesheet" href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.carousel.min.css">
<link rel="stylesheet" href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.theme.default.min.css">
<div class="owl-carousel owl-theme">
    <div class="item"><h4>1</h4></div>
    <div class="item"><h4>2</h4></div>
    <div class="item"><h4>3</h4></div>
    <div class="item"><h4>4</h4></div>
    <div class="item"><h4>5</h4></div>
    <div class="item"><h4>6</h4></div>
    <div class="item"><h4>7</h4></div>
    <div class="item"><h4>8</h4></div>
    <div class="item"><h4>9</h4></div>
    <div class="item"><h4>10</h4></div>
    <div class="item"><h4>11</h4></div>
    <div class="item"><h4>12</h4></div>
</div>

CSS

body {
  /*padding-top: 150px;*/
}

.owl-carousel .item {
    height: 10rem;
    background: #4DC7A0;
    padding: 1rem;
}

JavaScript

var onOwlDragg = function (owl, callback) {
	var isDragging = false
  var owlDragging = false
  var on = function() {	isDragging = true }
  var off = function() { isDragging = false }
  var move = function() {
  	if (isDragging && owlDragging) {
    	callback(owlDragging)
    }
  }

  $(document).on('touchstart mousedown', on)
  $(document).on('touchend mouseup', off)
  $(document).on('touchmove mousemove', move)
  owl.on('translate.owl.carousel', function(event) {
    owlDragging = event
    move()
  })
  owl.on('translated.owl.carousel', function(event) {
    move()
    owlDragging = false
  })
}


var owl = $('.owl-carousel').owlCarousel({
    loop: true,
    margin: 10,
    nav: true
})

onOwlDragg(owl, function(e) {
	console.log('move')
})