как я могу сделать свой слайдер больше?

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 

EDIT:

теперь я вижу, что у вас есть фиксированная высота в там. Чтобы сделать его больше, просто увеличьте высоту и/или добавьте фиксированную ширину.