スライドショーの挙動について

https://lopan.jp/css-animation-slideshow/

上記のサイトのコードを使って、スライドショーを作成したいと思っているのですが、
上記のサイトにもあるように、主導と自動をcssで両立することが出来ず、どうしたらいいか悩んでおります。
以下が、ソースコードになります。

HTML
1
2<!DOCTYPE html>
3<html lang="ja">
4<head>
5<meta charset="utf-8">
6<title>動くCSSのためのメモ。 - 6秒おきに切り替わるスライドショー（24秒後に戻ってくる）</title>
7<meta name="viewport" content="width=device-width">
8<meta name="robots" content="noindex,nofollow">
9<link rel="canonical" href="https://lopan.jp/css-animation">
10<link rel="stylesheet" href="style.css">
11</head>
12<body>
13<div class="slideshow">
14	<input type="radio" name="slideshow" id="switch1" checked>
15	<input type="radio" name="slideshow" id="switch2">
16	<input type="radio" name="slideshow" id="switch3">
17	<input type="radio" name="slideshow" id="switch4">
18	<input type="radio" name="slideshow" id="switch5">
19	<div class="slideContents">
20		<section id="slide1">
21			<img src="https://pbs.twimg.com/profile_images/3406268893/54b7e1f981b7df7c817af48d1b96ad5e_400x400.jpeg">
22		</section>
23		<section id="slide2">
24			<img src=".https://pbs.twimg.com/profile_images/3406268893/54b7e1f981b7df7c817af48d1b96ad5e_400x400.jpeg">
25		</section>
26		<section id="slide3">
27			<img src="https://pbs.twimg.com/profile_images/3406268893/54b7e1f981b7df7c817af48d1b96ad5e_400x400.jpeg">
28		</section>
29		<section id="slide4">
30			<img src="https://pbs.twimg.com/profile_images/3406268893/54b7e1f981b7df7c817af48d1b96ad5e_400x400.jpeg">
31		</section>
32		<section id="slide5">
33			<img src="https://pbs.twimg.com/profile_images/3406268893/54b7e1f981b7df7c817af48d1b96ad5e_400x400.jpeg">
34		</section>
35	</div>
36	<p class="arrow prev">
37		<i class="ico"></i>
38		<label for="switch1"></label>
39		<label for="switch2"></label>
40		<label for="switch3"></label>
41		<label for="switch4"></label>
42		<label for="switch5"></label>
43	</p>
44	<p class="arrow next">
45		<i class="ico"></i>
46		<label for="switch1"></label>
47		<label for="switch2"></label>
48		<label for="switch3"></label>
49		<label for="switch4"></label>
50		<label for="switch5"></label>
51	</p>
52</div>
53</body>
54</html>

css
1
2
3@charset "utf-8";
4
5.slideshow {
6	position: relative;
7	overflow: hidden;
8}
9input[name="slideshow"] {
10	display: none;
11}
12
13/* :::::: slideContents :::::: */
14.slideContents {
15	position: relative;
16	background: lightSeaGreen;
17	text-align: center;
18	-webkit-user-select: none;
19	user-select: none;
20	transition: transform .6s;
21}
22.slideContents section {
23	position: absolute;
24	top: 0;
25	left: 0;
26	width: 100%;
27	transform: translateX(100%);
28	transition: transform .6s cubic-bezier(0.215, 0.61, 0.355, 1);
29}
30.slideContents section img {
31	max-width: 100%;
32	padding: 0 50px;
33	box-sizing: border-box;
34	vertical-align: middle;
35}
36
37/* :::::: arrows :::::: */
38.arrow,
39.arrow label,
40.arrow .ico {
41	position: absolute;
42}
43.arrow {
44	top: 0;
45	margin: 0;
46	transition: background .3s;
47}
48.prev {
49	left: 0;
50}
51.next {
52	right: 0;
53}
54.arrow:hover {
55	background: rgba(255,255,255,.2);
56}
57.arrow,
58.arrow label {
59	cursor: pointer;
60	width: 50px;
61	height: 100%;
62}
63.arrow label {
64	top: 0;
65	left: 0;
66	z-index: 1;
67}
68.arrow .ico {
69	top: calc(50% - 6px);
70	width: 12px;
71	height: 12px;
72	border-top: 3px solid #fff;
73	opacity: 0;
74}
75.prev .ico {
76	left: 50%;
77	border-left: 3px solid #fff;
78	transform: rotate(-45deg);
79	transition: left .3s cubic-bezier(0.215, 0.61, 0.355, 1), opacity .3s;
80}
81.next .ico {
82	right: 50%;
83	border-right: 3px solid #fff;
84	transform: rotate(45deg);
85	transition: right .3s cubic-bezier(0.215, 0.61, 0.355, 1), opacity .3s;
86}
87.arrow:hover .ico {
88	opacity: .6;
89}
90.prev:hover .ico {
91	left: calc(50% - 6px);
92}
93.next:hover .ico {
94	right: calc(50% - 6px);
95}
96
97/* :::::: mechanism :::::: */
98.slideContents #slide1 {
99	position: relative;
100}
101.slideContents section {
102	animation: autoplay 30s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
103}
104@keyframes autoplay {
105	0%, 16%, 100% { transform: none; }
106	20% { transform: translateX(-100%); }
107	20.001%, 96% { transform: translateX(100%); }
108}
109
110/* :::::: arrow mechanism :::::: */
111.arrow label {
112	pointer-events: none;
113}
114#switch1:checked ~ .prev label[for="switch5"],
115#switch2:checked ~ .prev label[for="switch1"],
116#switch3:checked ~ .prev label[for="switch2"],
117#switch4:checked ~ .prev label[for="switch3"],
118#switch5:checked ~ .prev label[for="switch4"],
119#switch1:checked ~ .next label[for="switch2"],
120#switch2:checked ~ .next label[for="switch3"],
121#switch3:checked ~ .next label[for="switch4"],
122#switch4:checked ~ .next label[for="switch5"],
123#switch5:checked ~ .next label[for="switch1"] {
124	pointer-events: auto;
125}