Question

我需要我的滑块大约5倍，我不知道怎么做。如何使滑块更大？我不想使用jQuery，所以我只使用CSS和HTML。我试过增加宽度，但没有任何帮助

 h1 {color:#333; text-shadow:1px 1px #999; font-size:40px; margin:40px; text-align:center;}
.slider {
    display: block;
    /*min and max changes size of slider?*/
    height: 320px;
    min-width: 260px;
    max-width: 640px;
    margin: auto;
    margin-top: 20px;
    position: relative;
} 
.sliderinner {
     width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
}
.sliderinner>ul {
    list-style: none;
    height: 100%;
    width: 500%;
    overflow: hidden;
    position: relative;
    left: 0px;
}
.sliderinner>ul>li {
    width: 20%;
    height: 320px;
    float: left;
    position: relative;
}

.sliderinner>ul>li>img {
   margin: auto;
    height: 100%;
}
.slider input[type=radio] {
    position: absolute;
    left: 50%;
    bottom: 150px;
    z-index: 100;
    visibility: hidden;
}

.slider label {
    position: absolute;
    left: 50%;
    bottom: -45px;
    z-index: 100;
    width: 12px;
    height: 12px;
    background-color:#ccc;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    cursor: pointer;
    -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,.8);
    -moz-box-shadow: 0px 0px 3px rgba(0,0,0,.8);
    box-shadow: 0px 0px 3px rgba(0,0,0,.8);
    -webkit-transition: background-color .2s;
    -moz-transition: background-color .2s;
    -o-transition: background-color .2s;
    transition: background-color .2s;
}

.slider input[type=radio]#control1:checked~label[for=control1] { background-color: #333; }
.slider input[type=radio]#control2:checked~label[for=control2] { background-color: #333; }
.slider input[type=radio]#control3:checked~label[for=control3] { background-color: #333; }
.slider input[type=radio]#control4:checked~label[for=control4] { background-color: #333; }
.slider input[type=radio]#control5:checked~label[for=control5] { background-color: #333; }
.slider label[for=control1] { margin-left: -36px }
.slider label[for=control2] { margin-left: -18px }
.slider label[for=control4] { margin-left: 18px }
.slider label[for=control5] { margin-left: 36px }
.slider input[type=radio]#control1:checked~.sliderinner>ul { left: 0 }
.slider input[type=radio]#control2:checked~.sliderinner>ul { left: -100% }
.slider input[type=radio]#control3:checked~.sliderinner>ul { left: -200% }
.slider input[type=radio]#control4:checked~.sliderinner>ul { left: -300% }
.slider input[type=radio]#control5:checked~.sliderinner>ul { left: -400% }
.description {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
}
.description-text {
    background-color: rgba(0,0,0,.8);
    padding:10px;
    top: 0;
    z-index: 4;
    -webkit-transition: opacity .2s;
    -moz-transition: opacity .2s;
    -o-transition: opacity .2s;
    transition: opacity .2s;
    color: #fff;
}

Answer 1

.slider {
    display: block;
    /*min and max changes size of slider?*/
    height: 320px;
    min-width: 260px;
    max-width: 640px;
    margin: auto;
    margin-top: 20px;
    position: relative;
}

上面的代码没有设置固定的高度/宽度，所以它很可能会根据它的内容继承它的大小。要设置固定的高度和宽度：将代码更改为以下内容：

    .slider {
        display: block;
        /*min and max changes size of slider?*/
        height: 320px;
        min-width: 260px;
        max-width: 640px;
        height: //specified height
        width: //specified width
        margin: auto;
        margin-top: 20px;
        position: relative;
    }

已添加代码：

 height: //specified height
 width: //specified width

编辑：

我现在看到你有一个固定的高度。要使其更大，只需增加高度和/或增加固定宽度。

如何让我的滑块更大？

1 个答案: