JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://kenwheeler.github.io/slick/slick/slick.js"></script>
<link rel="stylesheet" href="http://kenwheeler.github.io/slick/slick/slick.css">
<div id="wrapper">
    <div class="slider">
        <div class="slide" data-no="1">your content 1 
            <button data-no="1">show position</button>
        </div>
        <div class="slide" data-no="2">your content 2
            <button data-no="2">show position</button>
        </div>
        <div class="slide" data-no="3">your content 3
            <button data-no="3">show position</button>
        </div>
    </div>
</div>
<label>Current active slide position:</label>
<input type="text" id="position">

CSS

.slide{
 
    width:490px;
    height:60px;
    border:1px solid;
}

JavaScript

$('.slider').slick({
  dots: true,
  infinite: true,
  speed: 300,
  slidesToShow: 1,
  adaptiveHeight: true
});
$('button').click(function(){
    var no = $(this).data('no');
    var slide = $('.slide[data-no="'+no+'"]')[0];
    var pos = findPos(slide);
    $('#position').val("x:"+pos.x+"  y:"+pos.y);
})
 function findPos(obj) {
     var curleft = 0, curtop = 0;
     if (obj.offsetParent) {
         do {
             curleft += obj.offsetLeft;
             curtop += obj.offsetTop;
         } while (obj = obj.offsetParent);
         return { x: curleft, y: curtop };
     }
     return undefined;
 };