スライドショーについて

今回は、「https://demo-stork.open-cage.com/」のサイト内にあるスライドショーの作成の仕方について、お聞きしたいと思っています。

現在制作段階なのですが、cssで作成しようか、javascriptで作成するべきかも判断が塚に状況です。
とりあえずでcssで進めていますが、bestがあればぜひ参考にさせてください。

一応、現段階での状況を以下に乗せておきます。
こちらの内容は無視していただいてもかまいません。
どうかよろしくお願いいたします。

html
1  <main>
2    <div class="main-top">
3      <h1>Happy WordPress Blog</h1>
4      <h2>幸せを運ぶWordPressテーマ「ストーク (こうのとり)」</h2>
5      <div class="thema-btn">
6        <a href="#">テーマ詳細ページへ</a>
7      </div>
8    </div>
9    <nav class="main-nav">
10      <div class="main-navs">
11        <a class="fas fa-chevron-left nav-left"></a>
12        <div class="main-nav-contents">
13          <div class="main-nav-content">
14            <a href="#">
15              <h1>カテゴリー00</h1>
16              <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcTou2A5SmkaQuYX9ZzXso55iHPLaMKH1QgvWtPmP86pIfnFwIJQ&usqp=CAU" width="240"
17              height="140">
18              <p>テンプレート：先頭固定表示</p>
19            </a>
20          </div>
21          <div class="main-nav-content">
22            <a href="#">
23              <h1>カテゴリー01</h1>
24              <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcTou2A5SmkaQuYX9ZzXso55iHPLaMKH1QgvWtPmP86pIfnFwIJQ&usqp=CAU" width="240"
25              height="140">
26              <p>極端な例</p>
27            </a>
28          </div>
29          <div class="main-nav-content">
30            <a href="#">
31              <h1>カテゴリー02</h1>
32              <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcTou2A5SmkaQuYX9ZzXso55iHPLaMKH1QgvWtPmP86pIfnFwIJQ&usqp=CAU" width="240"
33              height="140">
34              <p>パイラルメディア風</p>
35            </a>
36          </div>
37          <div class="main-nav-content">
38            <a href="#">
39              <h1>カテゴリ03</h1>
40              <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcTou2A5SmkaQuYX9ZzXso55iHPLaMKH1QgvWtPmP86pIfnFwIJQ&usqp=CAU" width="240"
41              height="140">
42              <p>記事ページのレイアウト</p>
43            </a>
44          </div>
45          <div class="main-nav-content">
46            <a href="#">
47              <h1>カテゴリー04</h1>
48              <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcTou2A5SmkaQuYX9ZzXso55iHPLaMKH1QgvWtPmP86pIfnFwIJQ&usqp=CAU" width="240"
49              height="140">
50              <p>ワンカラム固定ページ</p>
51            </a>
52          </div>
53          <div class="main-nav-content">
54            <a href="#">
55              <h1>カテゴリー05</h1>
56              <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcTou2A5SmkaQuYX9ZzXso55iHPLaMKH1QgvWtPmP86pIfnFwIJQ&usqp=CAU" width="240"
57              height="140">
58              <p>wordpress標準機能</p>
59            </a>
60          </div>
61          <div class="main-nav-content">
62            <a href="#">
63              <h1>カテゴリー06</h1>
64              <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcTou2A5SmkaQuYX9ZzXso55iHPLaMKH1QgvWtPmP86pIfnFwIJQ&usqp=CAU" width="240"
65              height="140">
66              <p>各種サービス埋込表示</p>
67            </a>
68          </div>
69          <div class="main-nav-content">
70            <a href="#">
71              <h1>カテゴリー07</h1>
72              <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcTou2A5SmkaQuYX9ZzXso55iHPLaMKH1QgvWtPmP86pIfnFwIJQ&usqp=CAU" width="240"
73              height="140">
74              <p>twitterソーシャルボタン</p>
75            </a>
76          </div>
77          <div class="main-nav-content">
78            <a href="#">
79              <h1>カテゴリー08</h1>
80              <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcTou2A5SmkaQuYX9ZzXso55iHPLaMKH1QgvWtPmP86pIfnFwIJQ&usqp=CAU" width="240"
81              height="140">
82              <p>ランディングページ</p>
83            </a>
84          </div>
85        </div>
86        <a class="fas fa-chevron-right nav-right"></a>
87      </div>
88    </nav>
89  </main>

css
1.main-navs {
2  display: flex;
3  margin: 0 auto;
4  width: 1240px;
5  align-items: center;
6}
7
8.main-nav-contents {
9  display: flex;
10  width: 1200px;
11  height: 200px;
12  margin: 30px auto;
13  position: relative;
14  overflow: hidden;
15}
16
17.main-nav-content {
18  margin: 5px;
19  display: block;
20  position: absolute;
21  left: 100%;
22  animation: slideAnime 24s ease infinite;
23}
24
25.main-nav-content a {
26  text-decoration: none;
27  color: black;
28}
29
30.main-nav-content h1 {
31  font-size: 8px;
32  background-color: rgba(255, 255, 0, 0.705);
33  display: inline-block;
34  padding: 5px;
35  top: 0;
36  transform: translateX(172px);
37}
38
39.nav-left , .nav-right {
40  font-size: 30px;
41  cursor: pointer;
42}
43
44.main-nav-content:nth-of-type(1) { animation-delay: 0s }
45.main-nav-content:nth-of-type(2) { animation-delay: 3s }
46.main-nav-content:nth-of-type(3) { animation-delay: 6s }
47.main-nav-content:nth-of-type(4) { animation-delay: 9s }
48.main-nav-content:nth-of-type(5) { animation-delay: 12s }
49.main-nav-content:nth-of-type(6) { animation-delay: 15s }
50.main-nav-content:nth-of-type(7) { animation-delay: 18s }
51.main-nav-content:nth-of-type(8) { animation-delay: 21s }
52
53@keyframes slideAnime {
54  0% { left: 100%;}
55  100% { left: -100%;}
56}