我使用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

我虽然无法解决绝对定位的问题,但我不知道为什么,但是有点着急。如果有人能同时做到这一点。

09-25 16:58
查看更多