2 варианта, придуманных за полминуты:
1) Если слоганы не будут менять/добавлять (или будут делать это очень редко) и не нужна будет смена слоганов по клику юзера, то создаешь блоки со слоганами в html, ставишь их в одном месте через position: absolute (например внутри основного контейнера слоганов) и затем пилишь keyframes анимации на css, которые циклично будут показывать/прятать нужные блоки изменяя opacity и прочие штуки, типа трансформов.
2) Если слоганы надо подгружать с бэкенда где их будут часто менять/добавлять, то так же запихиваешь их в разметку, добавляя первому элементу со старта класс active, затем на js через $(".text-block").length получаешь их количество, создаешь переменную инкременту и setInterval. Внутри интервала с нужным тебе шагом увеличиваешь инкременту, и к нужному блоку добавляешь класс active, убирая его же с других блоков. То есть что-то такое в итоге:
var len = $(".text-block").length;
var intervalCounter = 1;
setInterval(function() {
intervalCounter++;
if (intervalCounter > len) intervalCounter = 1;
$(".text-block").removeClass("active");
$(".text-block").eq(intervalCounter - 1).addClass("active");
}, 5000);
Если потребуется реализация смены слоганов при клике юзера, то заменяешь интервал на setTimeout, который вызывает сам себя, а на click биндишь очистку таймаута, изменение инкременты, смену классов и запуск таймаута. Часть этого кода тогда лучше будет обернуть в отдельную функцию.
Анимации соответственно будут реализованы с помощью css transition, и будут срабатывать при добавлении/убирании класса.
