sliding carousel

<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

#container {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}

#carousel, #navigation {
flex: initial;
display: block;
}

#carousel {
overflow: hidden;
width: 600px;
height: 300px;
border-radius: 4px;
background-color: #FF9CC5;
}

.p-wrapper {
position: relative;
width: 100%;
height: 100%;
transition: transform 0.4s ease-in-out;
}

#button_a:checked ~ #carousel .p-wrapper {
-webkit-transform: translateY(0);
transform: translateY(0);
}

#button_b:checked ~ #carousel .p-wrapper {
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
}

#button_c:checked ~ #carousel .p-wrapper {
-webkit-transform: translateY(-200%);
transform: translateY(-200%);
}

#button_d:checked ~ #carousel .p-wrapper {
-webkit-transform: translateY(-300%);
transform: translateY(-300%);
}

[class^="panel_"] {
overflow: auto;
position: relative;
width: inherit;
height: inherit;
padding: 48px;
}

#navigation {
margin-left: 24px;
}

[class^="label_"] {
display: block;
cursor: pointer;
margin: 8px 0;
width: 32px;
height: 32px;
line-height: 32px;
text-align: center;
border-radius: 4px;
color: #444;
background-color: #FF9CC5;
transition: all 0.3s ease;
}

[class^="label_"]:hover {
color: #444;
background-color: #ffeed9;
}

#button_a:checked ~ #navigation .label_a,
#button_b:checked ~ #navigation .label_b,
#button_c:checked ~ #navigation .label_c,
#button_d:checked ~ #navigation .label_d {
cursor: default;
color: #fff;
background-color: #222;
}
</style>

<body>
<div id="container">

<input hidden type="radio" name="carousel-control" id="button_a" checked/>
<input hidden type="radio" name="carousel-control" id="button_b"/>
<input hidden type="radio" name="carousel-control" id="button_c"/>
<input hidden type="radio" name="carousel-control" id="button_d"/>

<div id="carousel">
<div class="p-wrapper">
<section class="panel_a"> <h2> panel a </h2>stuff goes here <img src="https://64.media.tumblr.com/e7a6122b34eba9cf6a3c2af6f9700e48/tumblr_nht8hgC5br1txyfxdo6_400.gifv" width="auto" height="140px"></section>
<section class="panel_b"> <h2> panel b </h2>stuff goes here <img src="https://64.media.tumblr.com/e7a6122b34eba9cf6a3c2af6f9700e48/tumblr_nht8hgC5br1txyfxdo6_400.gifv" width="auto" height="140px"></section>
<section class="panel_c"> <h2> panel c </h2>stuff goes here <img src="https://64.media.tumblr.com/e7a6122b34eba9cf6a3c2af6f9700e48/tumblr_nht8hgC5br1txyfxdo6_400.gifv" width="auto" height="140px"></section>
<section class="panel_d"> <h2> panel d </h2>stuff goes here <img src="https://64.media.tumblr.com/e7a6122b34eba9cf6a3c2af6f9700e48/tumblr_nht8hgC5br1txyfxdo6_400.gifv" width="auto" height="140px"></section>
</div>
</div>

<div id="navigation">
<label for="button_a" class="label_a"> <span> a </span> </label>
<label for="button_b" class="label_b"> <span> b </span> </label>
<label for="button_c" class="label_c"> <span> c </span> </label>
<label for="button_d" class="label_d"> <span> d </span> </label>
</div>

</div>
</body>