如何让这个 CSS 只有轮播默认显示第一张幻灯片？

Question

我有一个 CSS 只有轮播（非常好！），唯一的问题是默认情况下没有选择第一张幻灯片。

如果不使用 JavaScript 我怎么能做到这一点？

<div class="carousel">
    <div class="item red slide-in" id="item1"><h1>Item 1</h1></div>
    <div class="item green slide-in" id="item2"><h1>Item 2</h1></div>
    <div class="item yellow slide-in" id="item3"><h1>Item 3</h1></div>
    <div class="item red slide-in" id="item4"><h1>Item 4</h1></div>
    <div class="controls">
        <a href="#item1" class="btn">•</a>
        <a href="#item2" class="btn">•</a>
        <a href="#item3" class="btn">•</a>
        <a href="#item4" class="btn">•</a>
    </div>
</div>

和核心css：

.carousel {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.carousel .item {
    position: absolute;
    width: 100%;
    height: 100%;
    text-align: center;
}

/* animations */

.carousel .slide-in {
    -webkit-transform: translate3d(-90%, 0px, 0px);
    -moz-transform: translate3d(-90%, 0px, 0px);
    -ms-transform: translate3d(-90%, 0px, 0px);
    -o-transform: translate(-90%, 0px, 0px);
    transform: translate3d(-90%, 0px, 0px);
    -webkit-transition: -webkit-transform 0.5s ease-out;
    -moz-transition: -moz-transform 0.5s ease-out;
    -ms-transition: -ms-transform 0.5s ease-out;
    -o-transition: -o-transform 0.5s ease-out;
    transition: transform 0.5s ease-out;
    z-index: 1;
}

.carousel .slide-in:target ~ .slide-in {
    -webkit-transform: translate3d(90%, 0px, 0px);
    -moz-transform: translate3d(90%, 0px, 0px);
    -ms-transform: translate3d(90%, 0px, 0px);
    -o-transform: translate(90%, 0px, 0px);
    transform: translate3d(90%, 0px, 0px);
}

.carousel .slide-in:target,
.carousel .slide-in:focus {
    -webkit-transform: translate3d(0px, 0px, 0px);
    -moz-transform: translate3d(0px, 0px, 0px);
    -ms-transform: translate3d(0px, 0px, 0px);
    -o-transform: translate(0px, 0px, 0px);
    transform: translate3d(0px, 0px, 0px);
    z-index: 3;
}

.carousel .slide-in:target + .slide-in {
    z-index: 2;
}

这是一个 fiddle 轮播功能：

http://jsfiddle.net/kmturley/fs6wge3f/6/

Answer 1

一种部分有效的方法是 select 第一个元素，如果它不是目标的话。

对于select一个不是目标的元素，使用:not(:target)否定它。

到select第一个元素，只要和:first-of-type合并即可：

Updated Example

.carousel .slide-in:first-of-type:not(:target) {
    -webkit-transform: translate3d(0px, 0px, 0px);
    -moz-transform: translate3d(0px, 0px, 0px);
    -ms-transform: translate3d(0px, 0px, 0px);
    -o-transform: translate(0px, 0px, 0px);
    transform: translate3d(0px, 0px, 0px);
    z-index: 3;
}

这种方法的警告是第一个元素似乎不再滑动。

或者，我唯一能想到的另一件事是拥有一个具有属性 autofocus="autofocus" 的输入元素。由于该元素最初将处于焦点，因此通过使用 select 或 .carousel input[type="checkbox"]:focus + .slide-in:

设置第一个元素的样式来利用它

Updated Example

.carousel input[type="checkbox"]:focus + .slide-in,
.carousel .slide-in:target,
.carousel .slide-in:focus {
    -webkit-transform: translate3d(0px, 0px, 0px);
    -moz-transform: translate3d(0px, 0px, 0px);
    -ms-transform: translate3d(0px, 0px, 0px);
    -o-transform: translate(0px, 0px, 0px);
    transform: translate3d(0px, 0px, 0px);
    z-index: 3;
}

这种方法的注意事项是，一旦隐藏的输入元素失去焦点，第一张幻灯片就会移动。

如何让这个 CSS 只有轮播默认显示第一张幻灯片？

How can I make this CSS only carousel show the first slide by default?

html

css

carousel