我正在尝试制作仅对HTML和CSS具有全角响应的图像滑块。我现在停留在如何使滑块全角响应上。
.slides {
padding: 0;
width: 868px;
height: 637px;
display: block;
margin: auto;
position: relative;
}
.slides * {
user-select: none;
-ms-user-select: none;
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
}
.slides input {
display: none;
}
.slide-container {
display: block;
}
.slide {
top: 0;
opacity: 0;
width: 868px;
height: 637px;
cursor: pointer;
display: block;
position: absolute;
transition: all .7s ease-in-out;
}
.slides img {
width: 100%;
height: 100%;
}
.nav label {
height: 100%;
display: none;
position: absolute;
z-index: 9;
cursor: pointer;
transition: opacity .2s;
color: #FFF;
font-size: 50pt;
text-align: center;
padding: 16px;
line-height: 637px;
}
.slide:hover+.nav label {
opacity: 0.5;
}
.nav .next {
right: 0;
}
input:checked+.slide-container .slide {
opacity: 1;
transform: scale(1);
transition: opacity 1s ease-in-out;
}
input:checked+.slide-container .nav label {
display: block;
}
<ul class="slides">
<input type="radio" name="radio-btn" id="img-1" checked />
<li class="slide-container">
<div class="slide">
<img id src="assets/images/Slide/bilhete.png" />
</div>
<div class="nav">
<label for="img-6" class="prev">‹</label>
<label for="img-2" class="next">›</label>
</div>
</li>
<input type="radio" name="radio-btn" id="img-2" />
<li class="slide-container">
<div class="slide">
<img src="assets/images/Slide/aplausos.png" />
</div>
<div class="nav">
<label for="img-1" class="prev">‹</label>
<label for="img-3" class="next">›</label>
</div>
</li>
<input type="radio" name="radio-btn" id="img-3" />
<li class="slide-container">
<div class="slide">
<img src="assets/images/Slide/Pa%C3%A7os.png" />
</div>
<div class="nav">
<label for="img-2" class="prev">‹</label>
<label for="img-4" class="next">›</label>
</div>
</li>
<input type="radio" name="radio-btn" id="img-4" />
<li class="slide-container">
<div class="slide">
<img src="assets/images/Slide/natal.png" />
</div>
<div class="nav">
<label for="img-3" class="prev">‹</label>
<label for="img-5" class="next">›</label>
</div>
</li>
<input type="radio" name="radio-btn" id="img-5" />
<li class="slide-container">
<div class="slide">
<img src="http://farm9.staticflickr.com/8055/8098750623_66292a35c0_z.jpg" />
</div>
<div class="nav">
<label for="img-4" class="prev">‹</label>
<label for="img-6" class="next">›</label>
</div>
</li>
<input type="radio" name="radio-btn" id="img-6" />
<li class="slide-container">
<div class="slide">
<img src="http://farm9.staticflickr.com/8195/8098750703_797e102da2_z.jpg" />
</div>
<div class="nav">
<label for="img-5" class="prev">‹</label>
<label for="img-1" class="next">›</label>
</div>
</li>
</ul>
任何帮助将不胜感激。我只需要使用CSS和HTML。
答案 0 :(得分:1)
您需要在以下两个位置将宽度更改为100%:
.slides {
padding: 0;
width: 100%;
height: 637px;
display: block;
margin: auto;
position: relative;
}
.slide {
top: 0;
opacity: 0;
width: 100%;
height: 637px;
cursor: pointer;
display: block;
position: absolute;
transition: all .7s ease-in-out;
}