style.css

body > div {
    overflow: hidden;
}

/* ----
 * css slider
 * ---- */
.slider {
    position: relative;
    z-index: 0;
}

.slider__items {
    transition: height .25s;
}

.slider__item {
    position: absolute;
    left: 50%;
    width: 200px;
    height: 300px;
    margin-left: -100px;
    overflow: hidden;
    user-select: none;
    border-radius: 10px;
    transition-timing-function: cubic-bezier(.19, 1, .22, 1);
    transition-duration: 1s;
    transition-property: opacity, transform;
}

img {
    width: 400px;
    max-width: none;
    height: 100%;
    margin-left: -100px;
    transition: transform 1s cubic-bezier(.19, 1, .22, 1);
}

/* ----
 * define position for each item
 * ---- */
.slider__item[data-pos="-2"] {
    opacity: 0;
    transform: translateX(-220%);
}

.slider__item[data-pos="-2"] img {
    transform: translateX(100px);
}

.slider__item[data-pos="-1"] {
    transform: translateX(-110%);
}

.slider__item[data-pos="-1"] img {
    transform: translateX(50px);
}

.slider__item[data-pos="1"] {
    transform: translateX(110%);
}

.slider__item[data-pos="1"] img {
    transform: translateX(-50px);
}

.slider__item[data-pos="2"] {
    opacity: 0;
    transform: translateX(220%);
}

.slider__item[data-pos="2"] img {
    transform: translateX(-100px);
}

/* ----
 * nav
 * ---- */
.slider__nav {
    margin-top: 20px;
    text-align: center;
}

.slider__nav button {
    min-width: 120px;
}

.slider__nav button[disabled] {
    color: #ccc;
    background: #fff;
}

.slider__dots {
    display: flex;
    justify-content: center;
    margin-top: 10px;
}

.slider__dots li {
    margin: 0 5px;
}

.slider__dots button {
    width: 50px;
    height: 30px;
    padding: 0;
}

.slider__active {
    background:rgb(243, 244, 246);
}

/* ----
 * counter
 * ---- */
.slider__counter {
    position: absolute;
    top: calc(61vw - 50px);
    right: 10px;
    padding: 0 10px;
    border-radius: 4px;
}