我有一个图片 slider - 当我只有 4 张图片时一切正常。当我开始向幻灯片放映添加图像时,同时显示了 2 张图片,因此 slider 不起作用。
对于添加图片时我做错了什么任何想法,我将不胜感激。
谢谢!
html {
background: radial-gradient(#238dbb, #114476);
height: 100%;
text-align: center;
font-family: Helvetica;
font-size: 3em;
color: #134c7e;
}
input.set {
display: none;
}
#slide1:checked ~ .mask .overflow {
margin-left: 0;
}
#slide2:checked ~ .mask .overflow {
margin-left: -100%;
}
#slide3:checked ~ .mask .overflow {
margin-left: -200%;
}
#slide4:checked ~ .mask .overflow {
margin-left: -300%;
}
#slide5:checked ~ .mask .overflow {
margin-left: -400%;
}
#slides {
margin: 50px auto;
width: 80%;
position: relative;
}
#slides .mask {
width: 90%;
overflow: hidden;
margin: auto;
}
#slides .overflow {
width: 400%;
-webkit-transform: translateZ(0);
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
#slides .slide {
width: 25%;
height: 200px;
line-height: 200px;
float: left;
background: #fff;
}
#controls {
width: 100%;
}
#controls label {
display: none;
width: 5%;
height: 60px;
opacity: 0.3;
position: absolute;
top: 50%;
margin-top: -30px;
cursor: pointer;
background: #000;
}
#controls label:hover {
opacity: 0.8;
}
#slide1:checked ~ #controls label:nth-child(2),
#slide2:checked ~ #controls label:nth-child(3),
#slide3:checked ~ #controls label:nth-child(4),
#slide4:checked ~ #controls label:nth-child(5) {
right: 0;
display: block;
}
#slide2:checked ~ #controls label:nth-child(1),
#slide3:checked ~ #controls label:nth-child(2),
#slide4:checked ~ #controls label:nth-child(3),
#slide5:checked ~ #controls label:nth-child(4) {
left: 0;
display: block;
}
<div id="slides">
<input checked type="radio" name="slider" id="slide1" class="set" />
<input type="radio" name="slider" id="slide2" class="set" />
<input type="radio" name="slider" id="slide3" class="set" />
<input type="radio" name="slider" id="slide4" class="set" />
<input type="radio" name="slider" id="slide5" class="set" />
<div class="mask">
<div class="overflow">
<div class="slide">
<img src="http://static.asiawebdirect.com/m/phuket/portals/phuket-com/homepage/phuket-magazine/freedom-beach/pagePropertiesImage/freedom-beach.jpg">
</div>
<div class="slide">2</div>
<div class="slide">
<img src="http://static.asiawebdirect.com/m/phuket/portals/phuket-com/homepage/phuket-magazine/freedom-beach/pagePropertiesImage/freedom-beach.jpg">
</div>
<div class="slide">
<img src="http://7-themes.com/data_images/out/33/6882876-beach-sunset.jpg">
</div>
<div class="slide">
<img src="http://wallpapercave.com/wp/rt17YTU.jpg">
</div>
</div>
</div>
<div id="controls" onclick="">
<label for="slide1"></label>
<label for="slide2"></label>
<label for="slide3"></label>
<label for="slide4"></label>
<label for="slide5"></label>
</div>
</div>
最佳答案
查看您的 CSS,您的 .slide
类有 width: 25%
。当然,如果您有 5 张宽度为 25% 的幻灯片,您将超出父容器的宽度。最后一张幻灯片将包裹在下面,这可能是您看到两张幻灯片的原因。
尝试将您的 .slide
类更改为 width: 20%
,这样它们的宽度之和就是 100%。
为了它们仍各自占据 100% 的宽度,您必须将父 .overflow
宽度设置为 500%
(每张幻灯片为 100%)。
关于html - 纯 css slider - 为什么图像显示在 block 中?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42207192/