style.css

.container {
    position: relative;
    width: 80%;
    max-width: 900px;

    margin: 2rem auto;
}

.img-container {
    display: flex;
    flex-direction: row;
    overflow-x: auto;

    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    border: 2px solid #aaa;
    border-radius: 5px;
}

.img-container::-webkit-scrollbar {
    display: none;
}

.img-container img {
    width: 100%;
    scroll-snap-align: start;
    margin: 0 2rem;
    position: relative;
    /* transition: 200ms transform; */
    /* transform: scale(0.5); */
}

.img-container img.active-img {
    /* transform: scale(1); */
}

.circles {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: row;
}

.circles > span {
    margin-left: 1rem;
    border: 1px solid #ccc;
    width: 20px;
    height: 20px;
    border-radius: 50%;
}

.active-circle {
    background: #ddd;
}

.left,
.right {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: white;
    font-size: 2rem;
    cursor: pointer;
    text-shadow: 0px 2px 0px black;
    font-weight: bolder;
}
.left:hover,
.right:hover {
    color: #ccc;
}

.left {
    left: 1rem;
}

.right {
    right: 1rem;
}