<!DOCTYPE html>
<html>
<head>
<meta charset=
"utf-8"
/>
<title>Image Slider</title>
<style>
body {
margin
:
0
;
padding
:
0
;
height
:
100
vh;
display
: flex;
justify-
content
:
center
;
align-items:
center
;
}
.slider {
width
:
800px
;
height
:
500px
;
border-radius:
10px
;
overflow
:
hidden
;
}
.imgs_slides {
width
:
500%
;
height
:
500px
;
display
: flex;
}
.imgs_slides input {
display
:
none
;
}
.slide {
width
:
20%
;
transition:
2
s;
}
.slide img {
width
:
800px
;
height
:
500px
;
}
.navigation {
position
:
absolute
;
width
:
800px
;
margin-top
:
-40px
;
display
: flex;
justify-
content
:
center
;
}
.navigation-btn {
border
:
2px
solid
#de6a23
;
padding
:
5px
;
border-radius:
10px
;
cursor
:
pointer
;
transition:
1
s;
}
.navigation-btn:not(:last-child) {
margin-right
:
40px
;
}
.navigation-btn:hover {
background
:
#de6a23
;
}
#radio
1:
checked~.first {
margin-left
:
0
;
}
#radio
2:
checked~.first {
margin-left
:
-20%
;
}
#radio
3:
checked~.first {
margin-left
:
-40%
;
}
#radio
4:
checked~.first {
margin-left
:
-60%
;
}
#radio
5:
checked~.first {
margin-left
:
-80%
;
}
</style>
<link rel=
"stylesheet"
type=
"text/css"
href=
"styles.css"
/>
</head>
<body>
<
center
>
<!-- Image slider start -->
<div class=
"slider"
>
<div class=
"imgs_slides"
>
<!-- Radio buttons start -->
<input type=
"radio"
name=
"radio-btn"
id=
"radio1"
/>
<input type=
"radio"
name=
"radio-btn"
id=
"radio2"
/>
<input type=
"radio"
name=
"radio-btn"
id=
"radio3"
/>
<input type=
"radio"
name=
"radio-btn"
id=
"radio4"
/>
<input type=
"radio"
name=
"radio-btn"
id=
"radio5"
/>
<!-- Radio buttons end -->
<!-- Embedding images start -->
<div class=
"first slide"
>
<img src=
</div>
<div class=
"slide"
>
<img src=
</div>
<div class=
"slide"
>
<img src=
</div>
<div class=
"slide"
>
<img src=
</div>
<div class=
"slide"
>
<img src=
</div>
<!-- Embedding images end -->
</div>
<!-- Navigation start -->
<div class=
"navigation"
>
<label for=
"radio1"
class=
"navigation-btn"
>
</label>
<label for=
"radio2"
class=
"navigation-btn"
>
</label>
<label for=
"radio3"
class=
"navigation-btn"
>
</label>
<label for=
"radio4"
class=
"navigation-btn"
>
</label>
<label for=
"radio5"
class=
"navigation-btn"
>
</label>
</div>
<!-- Navigation end -->
</div>
<!-- Image slider end -->
</
center
>
</body>
</html>