Question

我试图创建滑块背景。基本上创建一个容器并将几个图像放在这个容器内，每个图像都是整个页面的响应背景。结果我们可以有多个背景和一个滑块来改变它们。好吧，如果我将所有测量值都放在px中，那么一切都是有效的。但是，由于我认为它是一个响应式设计，所以我很快就投入了百分比。它让我而不是水平滚动垂直滚动。

类似的东西：

<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;
}

那么如何使用水平滚动制作多个背景图像

多个背景滑块

0 个答案: