JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.theme.default.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.min.js"></script>
<div class="owl-carousel carousel1">
  <div class="item">

    <div id="wrapper">
      <div id="element1"></div>
      <div id="element2"></div>
    </div>

  </div>
  <div class="item">
    <h4>13</h4></div>
</div>

CSS

#element1,
#element2 {
  width: 100px;
  height: 100px;
  background: #000;
}

#wrapper {
  position: relative;
  z-index: 99999;
  background: gray;
}

JavaScript

$('.owl-carousel').owlCarousel({
  loop: false,
  margin: 10,
  nav: true,
  responsive: {
    200: {
      items: 1
    }
  }
});

$('#wrapper').mousemove(function(e) {
  parallax(e, plane, 20);
  parallax(e, rocket, 29);
});

var plane = document.getElementById('element1');
var rocket = document.getElementById('element2');
plane.homePos = {
  x: plane.offsetLeft,
  y: plane.offsetTop
};
rocket.homePos = {
  x: rocket.offsetLeft,
  y: rocket.offsetTop
};

function parallax(e, target, layer) {
  var x = target.homePos.x - (e.pageX - target.homePos.x) / layer;
  var y = target.homePos.y - (e.pageY - target.homePos.y) / layer;
  $(target).offset({
    top: y,
    left: x
  });
};