JSFiddle - React, Tailwind, and code Playground

HTML

<div id="text_slide1">Содержимое текстового блока №1</div>
<div id="text_slide2">Содержимое текстового блока №2</div>
<div id="text_slide3">Содержимое текстового блока №3</div>
<div id="text_slide4">Содержимое текстового блока №4</div>
<div id="text_slide5">Содержимое текстового блока №5</div>

CSS

#text_slide1,
#text_slide2,
#text_slide3,
#text_slide4,
#text_slide5 {
  position: absolute;
  left: 0px;
  opacity: 0;
}

JavaScript

var text_slide_cur = 0;

function showtext_slide() {
  $('#text_slide' + (text_slide_cur + 1)).css({
    opacity: 0
  }).animate({
    opacity: 1.0,
    left: "50px"
  }, 1000);
  setTimeout(hidetext_slide, 8000);
}

function hidetext_slide() {
  $('#text_slide' + (text_slide_cur + 1)).css({
    opacity: 1
  }).animate({
    opacity: 0,
    left: "-50px"
  }, 1000, function() {
    showtext_slide();
  });
  text_slide_cur = (text_slide_cur + 1) % 5;
}
$(document).ready(function() {
  showtext_slide();
})