html幻灯片显示模式单张显示,我如何才能让此CSS仅轮播默认显示第一张幻灯片？...

我有一个CSS只旋转台(这是非常好的！)，唯一的问题是，第一滑片不被默认选中。我如何才能让此CSS仅轮播默认显示第一张幻灯片？

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

Item 1

Item 2

Item 3

Item 4

•

•

•

•

和核心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;

}

这里是旋转木马的工作小提琴：

2015-01-26

Kim T

+1

更新小提琴使用乔希的技术工作：http://jsfiddle.net/kmturley/fs6wge3f/9/ –

2015-01-27 01:43:40