自動スライドでページネーションあり（画像の上で表示、押せるように作成したい。）

前提・実現したいこと

ページネーションを画像の上に持って来たいです。
イメージとしては、下記の通りで、プラス自動スライドしていることです。
https://garigaricode.com/swiper_navigation/#sample214
よろしければ、ご教示ください。

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

ページネーションが画像に隠れている。
また、切り替わる時だけボタンが見える（フェードする時）

該当のソースコード

html
1<!DOCTYPE html>
2<html lang="ja">
3<body>
4<section id="auto-slide02">
5  <div id="auto-slider-fade02">
6    <input type="radio" id="auto-slider-fade02-1" name="gal">
7    <input type="radio" id="auto-slider-fade02-2" name="gal">
8    <input type="radio" id="auto-slider-fade02-3" name="gal">
9    <input type="radio" id="auto-slider-fade02-4" name="gal">
10    <input type="radio" id="auto-slider-fade02-5" name="gal">
11    <label for="auto-slider-fade02-1" id="navi1" class="btn1"></label>
12    <label for="auto-slider-fade02-2" id="navi2" class="btn1"></label>
13    <label for="auto-slider-fade02-3" id="navi3" class="btn1"></label>
14    <label for="auto-slider-fade02-4" id="navi4" class="btn1"></label>
15    <label for="auto-slider-fade02-5" id="navi5" class="btn1"></label>
16    <div id="slide">
17      <div id="slide1" class="slide-img">
18        <img src="assets/auto-slider-fade02-img01.jpg" alt="img">
19        <label id="navi1b" class="btn2"></label>
20      </div>
21      <div id="slide2" class="slide-img">
22        <img src="assets/auto-slider-fade02-img02.jpg" alt="img">
23        <label id="navi2b" class="btn2"></label>
24      </div>
25      <div id="slide3" class="slide-img">
26        <img src="assets/auto-slider-fade02-img03.jpg" alt="img">
27        <label id="navi3b" class="btn2"></label>
28      </div>
29      <div id="slide4" class="slide-img">
30        <img src="assets/auto-slider-fade02-img04.jpg" alt="img">
31        <label id="navi4b" class="btn2"></label>
32      </div>
33      <div id="slide5" class="slide-img">
34        <img src="assets/auto-slider-fade02-img05.jpg" alt="img">
35        <label id="navi5b" class="btn2"></label>
36      </div>
37    </div>
38    <div style="padding:30%;"></div>
39  </div>
40</section>
41<script>
42var mySwiper = new Swiper('.swiper-container', {
43	pagination: {
44		el: '.swiper-pagination',
45		type: 'bullets',
46		clickable: true,
47		dynamicBullets: true,
48		dynamicMainBullets: 1,
49	}
50});
51</script>
52</body>
53</html>
54

css
1
2#auto-slider-fade02 {
3	position: relative;
4	width: 1000px;
5  height: 250px;
6	margin: 0 auto;
7	padding-bottom: 7.5%;
8	overflow: hidden;
9}
10
11@media screen and (min-width: 641px) {
12	#auto-slider-fade02 {
13		padding-bottom: 20px;
14	}
15}
16
17#auto-slider-fade02 input {
18	display: none;
19}
20
21.btn1 {
22	position: absolute;
23	bottom: 0;
24	width: 12px;
25	height: 12px;
26	border-radius: 7px;
27	background-color: #ccc;
28	cursor: pointer;
29}
30
31@media screen and (min-width: 641px) {
32	.btn1 {
33		width: 12px;
34		height: 12px;
35		border-radius: 17px;
36	}
37}
38
39#navi1,
40#navi1b {
41	left: 27%;
42}
43
44@media screen and (min-width: 641px) {
45	#navi1,
46	#navi1b {
47		left: 40%;
48	}
49}
50
51#navi2,
52#navi2b {
53	left: 37%;
54	bottom: 30px;
55}
56
57@media screen and (min-width: 641px) {
58	#navi2,
59	#navi2b {
60		left: 45%;
61		bottom: 30px;
62	}
63}
64
65#navi3,
66#navi3b {
67	left: 47%;
68	bottom: 30px;
69}
70
71@media screen and (min-width: 641px) {
72	#navi3,
73	#navi3b {
74		left: 50%;
75		bottom: 30px;
76	}
77}
78
79#navi4,
80#navi4b {
81	left: 57%;
82	bottom: 30px;
83}
84
85@media screen and (min-width: 641px) {
86	#navi4,
87	#navi4b {
88		left: 55%;
89		bottom: 30px;
90	}
91}
92
93#navi5,
94#navi5b {
95	left: 67%;
96	bottom: 30px;
97}
98
99@media screen and (min-width: 641px) {
100	#navi5,
101	#navi5b {
102		left: 60%;
103		bottom: 30px;
104	}
105}
106
107#slide {
108	position: absolute;
109	width: 100%;
110	height: 100%;
111	opacity: 0;
112	animation: auto-slider-fade02 30s infinite;
113	-moz-animation: auto-slider-fade02 30s infinite;
114	-webkit-animation: auto-slider-fade02 30s infinite;
115	pointer-events: none;
116}
117
118.slide-img {
119	position: absolute;
120	width: 100%;
121	height: 100%;
122}
123.slide-img img {
124	width: 100%;
125}
126
127#slide1 { left: 0; }
128#slide2 { left: 1000px; }
129#slide3 { left: 2000px; }
130#slide4 { left: 3000px; }
131#slide5 { left: 4000px; }
132
133.btn2 {
134	position: absolute;
135	bottom: 0;
136	width: 12px;
137	height: 12px;
138	border-radius: 15px;
139	/* background-color: #56b329; */
140}
141
142@media screen and (min-width: 641px) {
143	.btn2 {
144		width: 20px;
145		height: 20px;
146		border-radius: 25px;
147	}
148}
149
150#auto-slider-fade02-1:checked ~ #slide {
151	animation: auto-slider-fade02-a 30s infinite;
152	animation-delay: 0s;
153	-moz-animation: auto-slider-fade02-a 30s infinite;
154	-moz-animation-delay: 0s;
155	-webkit-animation: auto-slider-fade02-a 30s infinite;
156	-webkit-animation-delay: 0s;
157}
158
159#auto-slider-fade02-2:checked ~ #slide {
160	animation: auto-slider-fade02-b 30s infinite;
161	animation-delay: -6s;
162	-moz-animation: auto-slider-fade02-b 30s infinite;
163	-moz-animation-delay: -6s;
164	-webkit-animation: auto-slider-fade02-b 30s infinite;
165	-webkit-animation-delay: -6s;
166}
167
168#auto-slider-fade02-3:checked ~ #slide {
169	animation: auto-slider-fade02-c 30s infinite;
170	animation-delay: -12s;
171	-moz-animation: auto-slider-fade02-c 30s infinite;
172	-moz-animation-delay: -12s;
173	-webkit-animation: auto-slider-fade02-c 30s infinite;
174	-webkit-animation-delay: -12s;
175}
176
177#auto-slider-fade02-4:checked ~ #slide {
178	animation: auto-slider-fade02-d 30s infinite;
179	animation-delay: -18s;
180	-moz-animation: auto-slider-fade02-d 30s infinite;
181	-moz-animation-delay: -18s;
182	-webkit-animation: auto-slider-fade02-d 30s infinite;
183	-webkit-animation-delay: -18s;
184}
185
186#auto-slider-fade02-5:checked ~ #slide {
187	animation: auto-slider-fade02-e 30s infinite;
188	animation-delay: -24s;
189	-moz-animation: auto-slider-fade02-e 30s infinite;
190	-moz-animation-delay: -24s;
191	-webkit-animation: auto-slider-fade02-e 30s infinite;
192	-webkit-animation-delay: -24s;
193}
194
195/* 各スライド向けスライドショー */
196
197@keyframes auto-slider-fade02 {
198  0% { left:0px; opacity:0; }
199	2% { left:0px; opacity:1; }
200	18% { left:0px; opacity:1; }
201	20% { left:0px; opacity:0; }
202	20.005% { left:-1000px; opacity:0; }
203	25% { left:-1000px; opacity:1; }
204	38% { left:-1000px; opacity:1; }
205	40% { left:-1000px; opacity:0; }
206	40.005% { left:-2000px; opacity:0; }
207	45% { left:-2000px; opacity:1; }
208	58% { left:-2000px; opacity:1; }
209	60% { left:-2000px; opacity:0; }
210	60.005% { left:-3000px; opacity:0; }
211	65% { left:-3000px; opacity:1; }
212	78% { left:-3000px; opacity:1; }
213	80% { left:-3000px; opacity:0; }
214	80.005% { left:-4000px; opacity:0; }
215	85% { left:-4000px; opacity:1; }
216	98% { left:-4000px; opacity:1; }
217	1000px { left:-4000px; opacity:0; }
218}
219
220以下省略

試したこと

コードを見直しました。

補足情報（FW/ツールのバージョンなど）

atomで作成しています。

行動規範の内容に同意します

回答1件

ベストアンサー

CSS
1.btn1 {
2	position: absolute;
3	bottom: 0;
4	width: 12px;
5	height: 12px;
6	border-radius: 7px;
7	background-color: #ccc;
8	cursor: pointer;
9	z-index: 1;/*ADD*/
10}
11```**動くサンプル：**[https://jsfiddle.net/ky0efv6h/](https://jsfiddle.net/ky0efv6h/)