ul, li {
padding: 0;
margin: 0;
list-style: none inside;
}

 ul.slider {
position: relative;
}

 ul.slider li {
opacity: 0;
transition: opacity .5s;
position: absolute;
left: 0px;
top: 0px;
margin: 50px;
padding: 50px;
border: 2px solid red;
background: #fff;
}

#container-slide ul.slider li:first-child {
    opacity: 1;
}

#container-slide ul.slider li:target {
    opacity: 1;
}

#container-slide nav {
position: relative;
top: 200px;
left: 50px;
}


/* 
   A partir de aquí el CSS es puro diseño visual para hacer una versión más vistosa.
   Puedes comentarlo si te resulta más fácil estudiar el ejemplo en su versión más sencilla

*/
 ul, li {
box-sizing: border-box;
}

 ul.slider {
padding: 30px;
}

 ul.slider li {
width: 100vw;
height: 100vh;
margin: 0;
padding: 0;
border: 0;
background-color: gray;
opacity: 0;
transition: opacity .5s;
padding-top: 30vh;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-weight: bold;
font-size: calc( 1.5rem + 1vw );
text-align: center;
}

#container-slide  #slide1 {
background-color: #00324b;
color: #fff;
}

#container-slide  #slide2 {
background-color: #65bce8;
color: #00324b;
}

#container-slide #slide3 {
background-color: #f90;
color: #00324b;
}

#container-slide #slide4 {
background-color: #00324b;
color: #65bce8;
}

#container-slide #slide5 {
background-color: #65bce8;
color: #00324b;
}

#container-slide nav {
width: 100vw;
position: absolute;
top: auto;
right: 0;
bottom: 0;
left: 0;
background: #f1f2f3;
}

#container-slide nav ul {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
}

 nav ul li {
display: flex;
flex-grow: 1;
flex-wrap: wrap;
box-sizing: border-box;
}

#container-slide nav a {
font-size: calc( 1.2rem + 1vw );
text-decoration: none;
font-weight: bold;
color: #00324b;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
line-height: 1.8;
flex-grow: 1;
text-align: center;
border-top: 5px solid #00324b;
border-right: 1px solid #00324b;
flex-wrap: wrap;
position: relative;
}

 nav li:last-child a {
border-right: 0;
}

#container-slide nav a:hover {
background-color: #00324b;
color: #fff;
border-top-color: #65bce8;
}

#container-slide nav a:active {
border-top-color: #f90;
background: #f90;
color: #00324b;
}