JSFiddle - React, Tailwind, and code Playground

HTML

<br><br><br><br><br><br>

<div class="aposlider">
  <div class="aposcontent">Я - просто текст первого слайда. А я - дополнительное предложение. Таких предложений может быть сколько угодно</div>
  <div class="aposcontent">Я - просто текст второго слайда. А я - дополнительное предложение. Таких предложений может быть сколько угодно</div>
  <div class="aposcontent">Я - просто текст третьего слайда. А я - дополнительное предложение. Таких предложений может быть сколько угодно</div>
  <div class="aposcontent">Я - просто текст четвёртого слайда. А я - дополнительное предложение. Таких предложений может быть сколько угодно</div>
  <div class="aposcontent">Я - просто текст пятого слайда. А я - дополнительное предложение. Таких предложений может быть сколько угодно</div>
</div>

CSS

@import url('https://fonts.googleapis.com/css?family=Philosopher');

* {
  margin: 0px;
  padding: 0px;
}

.aposlider {
  padding: 10px;
}

.aposcontent {
  width: 300px;
  font-family: 'Philosopher', sans-serif;
  opacity: 0;
  margin-top: -10px;
  position: absolute;
}

.apoactived {
  z-index: 2;
}

JavaScript

$(function() {
  var apofelement = $('.aposcontent:first'),
    speed = 800,
    interval = speed * 10;
  apofelement.animate({
    top: '+=10px',
    opacity: 1
  }, speed).addClass('apoactived');
  setInterval(function() {
    //console.log(apofelement.html());
    apofelement.animate({
      top: '-=10px',
      opacity: 0
    }, speed).removeClass('apoactived');
    if (apofelement.next().html() == undefined) {
      apofelement = $('.aposcontent:first')
    } else {
      apofelement = apofelement.next();
    };
    setTimeout(function() {
      apofelement.animate({
        top: '+=10px',
        opacity: 1
      }, speed).addClass('apoactived');
    }, speed)
  }, interval);
});