#slider{
    overflow: hidden;
}
.red{
    background-image: url("images/1slode.png");
    background-size: 100%;
    object-fit: contain;
}
.green{
    background-image: url("images/slide2.png");
    background-size: 100%;
    object-fit: contain;
}
.blue{
    background-image: url("images/slide3.png");
    background-size: 100%;
    object-fit: contain;
}
.slide-container{
    left: -100%;
    position: absolute;
    height: 100%;
    width: 100%;
    display: flex;
}
.slide-container:hover{
    cursor: grab;
}
.slide-container:active{
    cursor: grabbing;
}
.slide-container.preforward{
    transform: translateX(100%);
}
.slide-container.forward{
    transition: transform 1s;
    transform: translateX(0%);
}
.slide{
    height: 420px;
    width: 820px;
    flex-shrink: 0;
    object-fit: cover;
}
.slide-container.preback{
    transform: translateX(-100%);
}
.slide-container.back{

    transition: transform 1s;
    transform: translateX(0%);
}