Question

我在使用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;
}

Answer 1

那里有很多错误，看看这里。

<div id="captioned-gallery">
<div class="slider">

http://codepen.io/damianocel/pen/PPEXgq

我无法修复绝对定位的figcaption，我不知道为什么，但有点匆忙。如果有人可以同时出现这种情况。

Answer 2

嗯，这段代码对我来说可以循环运行2张幻灯片。诀窍是减慢第二张幻灯片的过渡，这样当它完成时它会循环到第一张幻灯片。

@keyframes slidy {
0% { left: 0%; }
50% { left: -100%; }
100% { left: -200%; }
}


@-webkit-keyframes slidy {
0% { left: 0%; }
50% { left: -100%; }
100% { left: -200%; }
}

Css滑块关键帧循环结束显示空白页面

2 个答案: