<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" type="text/javascript"></script>
<link href="https://u1351602.isp.regruhosting.ru/catalog/view/theme/default/stylesheet/slider-pro.css" rel="stylesheet">
<script src="https://u1351602.isp.regruhosting.ru/catalog/view/javascript/slider-pro.js" type="text/javascript"></script>
<div class="content">
  <div class="text">
    <span>ТЕКСТ</span>
  </div>
  <div class="slider-pro" id="my-slider">
    <div class="sp-slides">
      <div class="sp-slide">
        <img src="https://i.ibb.co/86WPTg8/yellow-slide.png">
      </div>
      <div class="sp-slide">
        <img src="https://i.ibb.co/Jn9GPxN/green-slide.png">
      </div>
      <div class="sp-slide">
        <img src="https://i.ibb.co/sm9B6cw/black-slide.png">
      </div>
    </div>
  </div>
</div>
<script type="text/javascript">
  jQuery( document ).ready(function( $ ) {
    $( '#my-slider' ).sliderPro({
      width:433,
      height: 246,
      arrows: true,
      fade: true,
      buttons: true,
      waitForLayers: false,
      loop: true,
      smallSize: 500,
      mediumSize: 1000,
      largeSize: 3000,
      autoplay: true,
      autoScaleLayers: true,
      autoplayDelay: 4500,
    });
  });
</script>

.content {
  position: relative;
}
.text {
  position: absolute;
  left: 50%;
  top: 10px;
  z-index: 1;
}