細えこたぁいいんだよ

「いろいろ考えてるけどさぁ。ちょっと慎重過ぎなんじゃないの？」
「他のブログだと、だいたい1回の記事で何か作って動かしてるよ。」
「そろそろ動くもん見してくれてもいいんじゃあないの？」

…

「あとVue.jsじゃないとダメなの？」
「スライドショーぐらいならどっかのライブラリ使ってぱぱっと作れるんじゃないの？」

…はいはいはい。

脳内がうるさいので少し寄り道をしてみましょう。
スライドショーのライブラリを探してみます。
ありました。

kenwheeler.github.io

slick
the last carousel you'll ever need
めちゃめちゃお洒落。
基本的には画像のスライドショーに使うようですが、HTMLタグならなんでもいいようです。
色々オプションを指定できてよさげ。

こいつをjsFiddleで試してみましょう。
jsFiddleは手軽にHTMLとJavaScriptを打ち込んで表示や動作を確認できるWebサイトです。
できたものがこれです。
まあ簡単。
5秒ごとに文章が交互に表示されるのが分かるでしょうか。

jQuery セレクタで指定したdivタグに表示オプションを渡したslickをかましています。
HTMLの"single-item"クラスのdivタグ配下をスライドとして認識するようです（この場合だと2つ）。
なるほど簡単ですね。

ただちょっと物足りないかな。
文章1行ずつ表示できた方が見栄えがしそうです。
画像用なんでしょうがないでしょう。

やっば細かい方がいいかも

文章を1行ずつ表示するのはこのサイト独自なので、いちから作る方がよさそうです。
続いてjsFiddleでVue.jsを使って試してみましょう。

playボタンを押すと動くようにしてみました。
1行ずつ出て最後に全行が消えます。この方が雰囲気出てるんではないでしょうか。
ボタンの上のfalseはデバッグ用の変数なので気にしないでください。

ざっと中身を説明すると、JavaScript内のdata内がHTMLに動的に反映されるようになっています。
listの4つの要素のmsgがHTMLのliタグの中にバインドされています。
初期表示ではliタグはv-ifで制御されて非表示になっています。
playボタンを押すとshow変数にtrueが入り、liタグの表示アニメーションが始まります。
表示アニメーションはJavaScriptのenter関数で定義され、liタグごとに2秒ずつずれて始まり、1秒かけて表示を終了します。
afterEnter関数で最後のliタグの表示完了を検知すると3秒後にshowをfalseにします。
その後、2.5秒を掛けて各liタグは非表示状態へ戻ります。

非常に細かい設定が可能ですね。
調整すれば画像だけズラして消すとかもできるでしょう。

これだけでも結構疲れました。
ちょっと試す分にはいいんですが、画面系は細かいことに延々と時間を使ってしまいます。
画面のアニメーションだけではなくて、サーバサイドの構成とかやることは山ほどありますからね。