<!DOCTYPE html>
<
html
>
<
head
>
<
title
>GeeksfoGeeks</
title
>
<
style
>
#frame {
margin: 0 auto;
width: 800px;
max-width: 100%;
text-align: center;
}
#frame input[type=radio] {
display: none;
}
#frame label {
cursor: pointer;
text-decoration: none;
}
#slides {
padding: 10px;
border: 5px solid #0F0;
background: #00F;
position: relative;
z-index: 1;
}
#overflow {
width: 100%;
overflow: hidden;
}
#frame1:checked~#slides .inner {
margin-left: 0;
}
#frame2:checked~#slides .inner {
margin-left: -100%;
}
#frame3:checked~#slides .inner {
margin-left: -200%;
}
#frame4:checked~#slides .inner {
margin-left: -300%;
}
#slides .inner {
transition: margin-left 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
width: 400%;
line-height: 0;
height: 300px;
}
#slides .frame {
width: 25%;
float: left;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
color: #FFF;
}
#slides .frame_1 {
background: #90C;
}
#slides .frame_2 {
background: #F90;
}
#slides .frame_3 {
background: #606;
}
#slides .frame_4 {
background: #C00;
}
#controls {
margin: -180px 0 0 0;
width: 100%;
height: 50px;
z-index: 3;
position: relative;
}
#controls label {
transition: opacity 0.2s ease-out;
display: none;
width: 50px;
height: 50px;
opacity: .4;
}
#controls label:hover {
opacity: 1;
}
#frame1:checked~#controls label:nth-child(2),
#frame2:checked~#controls label:nth-child(3),
#frame3:checked~#controls label:nth-child(4),
#frame4:checked~#controls label:nth-child(1) {
background:
float: right;
margin: 0 -50px 0 0;
display: block;
}
#frame1:checked~#controls label:nth-last-child(2),
#frame2:checked~#controls label:nth-last-child(3),
#frame3:checked~#controls label:nth-last-child(4),
#frame4:checked~#controls label:nth-last-child(1) {
background:
float: left;
margin: 0 0 0 -50px;
display: block;
}
#bullets {
margin: 150px 0 0;
text-align: center;
}
#bullets label {
display: inline-block;
width: 10px;
height: 10px;
border-radius: 100%;
background: #ccc;
margin: 0 10px;
}
#frame1:checked~#bullets label:nth-child(1),
#frame2:checked~#bullets label:nth-child(2),
#frame3:checked~#bullets label:nth-child(3),
#frame4:checked~#bullets label:nth-child(4) {
background: #444;
}
@media screen and (max-width: 900px) {
#frame1:checked~#controls label:nth-child(2),
#frame2:checked~#controls label:nth-child(3),
#frame3:checked~#controls label:nth-child(4),
#frame4:checked~#controls label:nth-child(1),
#frame1:checked~#controls label:nth-last-child(2),
#frame2:checked~#controls label:nth-last-child(3),
#frame3:checked~#controls label:nth-last-child(4),
#frame4:checked~#controls label:nth-last-child(1) {
margin: 0;
}
#slides {
max-width: calc(100% - 140px);
margin: 0 auto;
}
}
</
style
>
</
head
>
<
body
>
<
div
id
=
"frame"
>
<
input
type
=
"radio"
name
=
"frame"
id
=
"frame1"
checked />
<
input
type
=
"radio"
name
=
"frame"
id
=
"frame2"
/>
<
input
type
=
"radio"
name
=
"frame"
id
=
"frame3"
/>
<
input
type
=
"radio"
name
=
"frame"
id
=
"frame4"
/>
<
div
id
=
"slides"
>
<
div
id
=
"overflow"
>
<
div
class
=
"inner"
>
<
div
class
=
"frame frame_1"
>
<
div
class
=
"frame-content"
>
<
h2
>Slide 1</
h2
>
</
div
>
</
div
>
<
div
class
=
"frame frame_2"
>
<
div
class
=
"frame-content"
>
<
h2
>Slide 2</
h2
>
</
div
>
</
div
>
<
div
class
=
"frame frame_3"
>
<
div
class
=
"frame-content"
>
<
h2
>Slide 3</
h2
>
</
div
>
</
div
>
<
div
class
=
"frame frame_4"
>
<
div
class
=
"frame-content"
>
<
h2
>Slide 4</
h2
>
</
div
>
</
div
>
</
div
>
</
div
>
</
div
>
<
div
id
=
"controls"
>
<
label
for
=
"frame1"
></
label
>
<
label
for
=
"frame2"
></
label
>
<
label
for
=
"frame3"
></
label
>
<
label
for
=
"frame4"
></
label
>
</
div
>
<
div
id
=
"bullets"
>
<
label
for
=
"frame1"
></
label
>
<
label
for
=
"frame2"
></
label
>
<
label
for
=
"frame3"
></
label
>
<
label
for
=
"frame4"
></
label
>
</
div
>
</
div
>
</
body
>
</
html
>