multiple background slider - html

Question

I'm trying to create slider backgrounds. Basically create a container and put couple images inside of this container, each image is a responsive background for the whole page. In result we can have multiple backgrounds and a slider to change them. Well if I put all measurement in px than everything is work.but as soon I put in percentage since it suppose to be a responsive design. It get me instead of horizontal scroll a vertical one.
Something like that:
<div class="slider-wrap">
<div class="slide" id="slide-0">
</div>
<div class="slide" id="slide-1">
</div>
</div>
css:
* {
box-sizing: border-box;
font-family: sans-serif;
font-size: 10px;
color: white;
margin: 0;
padding: 0;
outline: none;
text-decoration: none; /*clear href decoration*/
}
body {
margin: 0px auto;
min-height: 100vh;
}
.slider-wrap {
width:100%;
height:100vh;
min-height: 100vh;
overflow-x: scroll;
}
.slide {
display: inline-block;
width: 100%;
min-height: 100vh;
float:left;
}
#slide-1 {
background-image: url(img/m_m.jpg);
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}
#slide-0 {
background-image: url(img/b_m.jpg);
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}
So how to make a multiple background images with horizontal scroll