style.css

body{
    background-color: white;
    height: 100%;
    width: 100%
}

#container {
    width: 400px;
    height: 400px;
    position: relative;
    overflow: hidden;
    margin: auto;
}

.inner {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    transform: translateX(0%);
    transition: transform 300ms ease;
}
.red{
    background-color: red;
}
.black{
    background-color: black;
}

.yellow{
    background-color: yellow;
}
.blue{
    background-color: blue;
}

#menuContainer {
    position: absolute;
    color: white;
    bottom: 0;
    z-index: 10;
    margin:0;
    padding: 0;
    left: 50%;
    transform: translateX(-50%);
}
.dot{
    display: inline-block;
    text-align: center;
    padding-right: 10px;
    font-size: 35px;
}
.dot:hover{
    cursor: pointer;
}
.active{
    font-weight: bold;
    color: lightgreen;
}

#buttonBefore, #buttonAfter{
    position: absolute;
    color: white;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    background: transparent;
    border: 0;
    font-size: 35px;
}
#buttonBefore {left: 0;}
#buttonAfter {right: 0;}
#buttonBefore:hover, #buttonAfter:hover{
    color: lightgreen;
}