Pure CSS Slider / Carousel / Slideshow с автозатором / анимацией и навигацией ⇐ CSS

[Anonymous]

Может кто-нибудь сказать мне, можно ли объединить эти два в одно, используя только Html и CSS? (либо с помощью автозапуска, анимации, либо любым другим возможным способом). Кажется, этот вопрос возникал раньше, но всегда без ответа. Вот куда я попал.

https://jsfiddle.net/e0g4a1w1/10/?utm_s ... n=e0g4a1w1

• One
• Two
• Three

Item 1



Item 2



Item 3



----
CSS
---
.rotator {
list-style: none;
font-size: 65px;
position: absolute;
z-index: 1;
top: 35%;
width: 100%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}

.rotator > li {
position: absolute;
opacity: 0;
top: 35%;
width: 100%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}

.rotator > li:first-child {
animation: loop 7s infinite;
}

.rotator > li:nth-child(2) {
animation: opsecond 7s infinite;
}

.rotator > li:last-child {
animation: oplast 7s infinite;
}

@keyframes loop {
0% { opacity: 0; }
10% { opacity: 1; }
33% { opacity: 1; }
44% { opacity: 0; }
}

@keyframes opsecond {
33% { opacity: 0; }
44% { opacity: 1; }
66% { opacity: 1; }
77% { opacity: 0; }
}

@keyframes oplast {
66% { opacity: 0; }
77% { opacity: 1; }
100% { opacity: 1; }
0% { opacity: 1; }
10% { opacity: 0; }
}

.carousel-wrapper{
height:300px;
position:relative;
width:400px;
}

.carousel-item{
position:absolute;
top: 35%;
width: 100%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
opacity:0;
transition: all 0.5s ease-in-out;
}

[id^="item"] {
display: none;
}

.item-1 {
z-index: 2;
opacity: 1;
}

*:target ~ .item-1 {
opacity: 0;
}

#item-1:target ~ .item-1 {
opacity: 1;
}

#item-2:target ~ .item-2, #item-3:target ~ .item-3 {
z-index: 3;
opacity: 1;
}


Подробнее здесь: https://stackoverflow.com/questions/492 ... navigation