.carousel {
    display: flex;
    overflow-x: scroll;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch; /* добавляем плавную прокрутку на устройствах iOS */
    justify-content: center;
    scrollbar-width: none; /* удаляем стандартные полосы прокрутки */
    -ms-overflow-style: none; /* удаляем стандартные полосы прокрутки в Internet Explorer и Edge */
}

    .carousel::-webkit-scrollbar {
        display: none; /* удаляем полосы прокрутки для браузеров, основанных на Webkit */
    }

.slider {
    position: relative;
    width: 200px;
    height: 200px;
    margin: 50px auto 0;
    /* Чтобы во время перетаскивания слайда ничего не выделить внутри него */
    user-select: none;
    /* Чтобы запретить скролл страницы, если мы начали двигать слайдер по оси X */
    touch-action: pan-y;
}

    /* Если где-то внутри слайдера будут изображения,
то нужно задать им pointer-events: none,
чтобы они не перетаскивались мышью */

    .slider img {
        poiner-events: none;
    }

.slider-list {
    width: 200px;
    height: 200px;
    overflow: hidden;
}

    .slider-list.grab {
        cursor: grab;
    }

    .slider-list.grabbing {
        cursor: grabbing;
    }

.slider-track {
    display: flex;
}

.slide {
    width: 200px;
    height: 200px;
    /* Чтобы слайды не сжимались */
    flex-shrink: 0;
    /* Увеличиваем и центрируем цифру внутри слайда */
    font-size: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #000;
}

.slider-arrows {
    margin-top: 15px;
    text-align: center;
}

.next,
.prev {
    background: none;
    border: none;
    margin: 0 10px;
    font-size: 30px;
    cursor: pointer;
}

    .next.disabled,
    .prev.disabled {
        opacity: .25;
        pointer-events: none;
    }