我使用CSS制作的滑块存在一些问题。我有2张图片,我想向左滑动。在第二张图片的末尾,应该先显示,然后显示空白幻灯片。我认为关键帧百分比有问题,不确定吗?
如何计算2张滑动图像的关键帧?
<div id="captioned-gallery">
<figure class="slider">
<figure>
<img src="http://example.com/wp-content/uploads/2015/10/cyprus-nicosia-2.jpg" alt>
<figcaption>slider 1 caption</figcaption>
</figure>
<figure>
<img src="http://example.com/wp-content/uploads/2015/10/nicosia.jpg" alt>
<figcaption> slider 2 caption</figcaption>
</figure>
</figure>
</div>
和CSS
/* Frontpage Slider */
@keyframes slidy {
0% {
left: 0%;
}
50% {
left: -100%;
}
75% {
left: -200%;
}
100% {
left: -200%;
}
}
@-webkit-keyframes slidy {
0% {
left: 0%;
}
50% {
left: -100%;
}
75% {
left: -200%;
}
100% {
left: -200%;
}
}
figure {
margin: 0;
font-family: sans-serif;
font-weight: 100;
}
div#captioned-gallery {
width: 100%;
overflow: hidden;
}
figure.slider {
position: relative;
width: 200%;
font-size: 0;
animation: 25s slidy infinite;
-webkit-animation: 20s slidy infinite
}
figure.slider figure {
width: 50%;
height: auto;
display: inline-block;
position: inherit;
}
figure.slider img {
width: 100%;
height: auto;
}
figure.slider figure figcaption {
position: absolute;
top: 30%;
left: 10%;
width: 75%;
text-align: center;
line-height: 160%;
background: rgba(0, 0, 0, 0.6);
color: #fff;
font-size: 3vw;
padding: .6rem;
}
最佳答案
那里有很多错误,请看这里。
<div id="captioned-gallery">
<div class="slider">
http://codepen.io/damianocel/pen/PPEXgq
我虽然无法解决绝对定位的问题,但我不知道为什么,但是有点着急。如果有人能同时做到这一点。