複数の画像を左詰めで一行に表示し、クリックでスライドさせたい

前提・実現したいこと

Html,CSS初心者です。
はじめての投稿で不足ありましたらすみません。

結婚報告のためにWebサイトを作成しているのですが、以下の部分で躓いています。
・Webサイト上に複数の画像を設置し、右矢印ボタンを押すと画像がスライドするようにしたい（Amazon Prime Videoのような）

大元のコードは_watercolorさんのサイトから参照させて頂きました。

発生している問題・エラーメッセージ

画像１枚のケースでは少し表現できました。以下が問題です。

・複数画像を設置しても2枚ずつしか表示されない
・スライドの動きが期待するものではない
（4〜5枚ぐらいの塊がすっと左にすっと移動する形にしたいが、左の１枚だけそんな感じに動いていて右の1枚はパッと現れるような挙動）

アドバイス頂けますと幸いです????‍♂️

該当のソースコード

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4<meta charset="utf-8">
5<title>画像スライドトライ</title>
6<meta name="viewport" content="width=device-width">
7<meta name="robots" content="noindex,nofollow">
8<link rel="canonical" href="https://lopan.jp/css-animation">
9<link rel="stylesheet" href="slide.css">
10</head>
11<body>
12<div class="slideshow">
13	<input type="radio" name="slideshow" id="switch1" checked>
14	<input type="radio" name="slideshow" id="switch2">
15	<input type="radio" name="slideshow" id="switch3">
16	<input type="radio" name="slideshow" id="switch4">
17	<input type="radio" name="slideshow" id="switch5">
18	<div class="slideContents">
19		<section id="slide1">
20			<img src="image0001.png">
21		</section>
22		<section id="slide2">
23			<img src="image0002.png">
24		</section>
25		<section id="slide3">
26			<img src="image0003.jpg">
27		</section>
28		<section id="slide4">
29			<img src="image0004.jpg">
30		</section>
31		<section id="slide5">
32			<img src="image0005.jpg">
33		</section>
34	</div>
35	<p class="arrow prev">
36		<i class="ico"></i>
37		<label for="switch1"></label>
38		<label for="switch2"></label>
39		<label for="switch3"></label>
40		<label for="switch4"></label>
41		<label for="switch5"></label>
42	</p>
43	<p class="arrow next">
44		<i class="ico"></i>
45		<label for="switch1"></label>
46		<label for="switch2"></label>
47		<label for="switch3"></label>
48		<label for="switch4"></label>
49		<label for="switch5"></label>
50	</p>
51</div>
52</body>
53</html>

slide.css

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