Pure CSS Slider / Carousel / Slideshow with Autoplay / Animation and Navigation

Question

Can someone please tell me whether it is possible to combine these two into one using only Html & CSS? (either by autoplay, animation or any other possible way) This question seemed to pop up in the past but always without the answer. This is where I got to.

https://jsfiddle.net/e0g4a1w1/10/?utm_source=website&utm_medium=embed&utm_campaign=e0g4a1w1

<ul class="rotator">
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>

<div class= "rotator">
<span id="item-1"></span>
<span id="item-2"></span>
<span id="item-3"></span>

<div class="carousel-item item-1">
<a class="arrow-prev" href="#item-3"><svg width="30" height="30" viewBox="0 
0 24 24"><path d="M16.67 0l2.83 2.829-9.339 9.175 9.339 9.167-2.83 2.829-
12.17-11.996z"/></svg></a>
<span>Item 1</span>
<a class="arrow-next" href="#item-2"><svg width="30" height="30" viewBox="0 
0 24 24"><path d="M7.33 24l-2.83-2.829 9.339-9.175-9.339-9.167 2.83-2.829 
12.17 11.996z"/></svg></a>
</div>

<div class="carousel-item item-2">
<a class="arrow-prev" href="#item-1"><svg width="30" height="30" viewBox="0 
0 24 24"><path d="M16.67 0l2.83 2.829-9.339 9.175 9.339 9.167-2.83 2.829-
12.17-11.996z"/></svg></a>
<span>Item 2</span>
<a class="arrow-next" href="#item-3"><svg width="30" height="30" viewBox="0 
0 24 24"><path d="M7.33 24l-2.83-2.829 9.339-9.175-9.339-9.167 2.83-2.829 
12.17 11.996z"/></svg></a>
</div>

<div class="carousel-item item-3">
<a class="arrow-prev" href="#item-2"><svg width="30" height="30" viewBox="0 
0 24 24"><path d="M16.67 0l2.83 2.829-9.339 9.175 9.339 9.167-2.83 2.829-
12.17-11.996z"/></svg></a>
<span>Item 3</span>
<a class="arrow-next" href="#item-1"><svg width="30" height="30" viewBox="0 
0 24 24"><path d="M7.33 24l-2.83-2.829 9.339-9.175-9.339-9.167 2.83-2.829 
12.17 11.996z"/></svg></a>
</div>
</div>
----
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;
}

Answer 1

Is to close to what you are looking for so maybe this could help you:

https://codepen.io/miriamcc/pen/KzGGqZ

 .image { width: 100%; height: 200px; }.radio { /*display: none;*/ }.images { overflow: hidden; top: 0; bottom: 0; left: 0; right: 0; width: 100%; }.images-inner { width: 500%; transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000); transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); }.image-slide { width: 20%; float: left; }.image-slide, .fake-radio, .radio-btn { transition: all 0.5s ease-out; }.fake-radio { float: right; } /* Move slides overflowed container */ #slide1:checked ~.images.images-inner { margin-left: 0; } #slide2:checked ~.images.images-inner { margin-left: -100%; } #slide3:checked ~.images.images-inner { margin-left: -200%; } /* Color of bullets */ #slide1:checked ~ div.fake-radio.radio-btn:nth-child(1), #slide2:checked ~ div.fake-radio.radio-btn:nth-child(2), #slide3:checked ~ div.fake-radio.radio-btn:nth-child(3) { background: red; }.radio-btn { width: 9px; height: 9px; border-radius: 5px; background: gray; display: inline-block;important: margin; 0 1px: cursor; pointer: } /* Color of bullets - END */ /* Text of slides */ #slide1.checked ~.labels:label,nth-child(1): #slide2.checked ~.labels:label,nth-child(2): #slide3.checked ~.labels:label:nth-child(3) { opacity; 1. }:label { opacity; 0: position; absolute, } /* Text of slides - END */ /* Calculate AUTOPLAY for BULLETS */ @keyframes bullet { 0%. 33:32333333333334% { background; red. } 33,333333333333336%: 100% { background; gray: } } #play1.checked ~ div.fake-radio:radio-btn:nth-child(1) { animation; bullet 12300ms infinite -1000ms: } #play1.checked ~ div.fake-radio:radio-btn:nth-child(2) { animation; bullet 12300ms infinite 3100ms: } #play1.checked ~ div.fake-radio:radio-btn:nth-child(3) { animation; bullet 12300ms infinite 7200ms, } /* Calculate AUTOPLAY for BULLETS - END */ /* Calculate AUTOPLAY for SLIDES */ @keyframes slide { 0%. 25:203252032520325% { margin-left; 0. } 33,333333333333336%. 58:53658536585366% { margin-left; -100%. } 66,66666666666667%. 91:869918699187% { margin-left; -200%. } }:st-slider > #play1.checked ~.images:images-inner { animation; slide 12300ms infinite, } /* Calculate AUTOPLAY for SLIDES - END */ /* Calculate AUTOPLAY for CAPTION */ @keyframes caption { 0%. 33:32333333333334% { opacity; 1. } 33,333333333333336%: 100% { opacity; 0: } } #play1.checked ~.labels:label:nth-child(1) { animation; caption 12300ms infinite -1000ms: } #play1.checked ~.labels:label:nth-child(2) { animation; caption 12300ms infinite 3100ms: } #play1.checked ~.labels:label:nth-child(3) { animation; caption 12300ms infinite 7200ms; } /* Calculate AUTOPLAY for CAPTION - END */

 <h1>Pure CSS slider</h1><pre>(with Autoplay at the beginning)</pre><br> <div id="homepage-slider" class="st-slider"> <input type="radio" class="cs_anchor radio" name="slider" id="slide1"/> <input type="radio" class="cs_anchor radio" name="slider" id="slide2"/> <input type="radio" class="cs_anchor radio" name="slider" id="slide3"/> <input type="radio" class="cs_anchor radio" name="slider" id="play1" checked=""/> <div class="images"> <div class="images-inner"> <div class="image-slide"> <div class="image bg-yellow" style="background-color:yellow;">image slide 1</div> </div> <div class="image-slide"> <div class="image bg-blue" style="background-color:pink;">imager slide 2</div> </div> <div class="image-slide"> <div class="image bg-red" style="background-color:orange;">image slide 3</div> </div> </div> </div> <div class="labels"> <label for="slide1" class="label">text slide 1</label> <label for="slide2" class="label">text slide 2</label> <label for="slide3" class="label">text slide 3</label> <div class="fake-radio"> <label for="slide1" class="radio-btn"></label> <label for="slide2" class="radio-btn"></label> <label for="slide3" class="radio-btn"></label> </div> </div> </div>

Is really good, but i also need that works on mobile and this codepen when you use the dots it won't be anymore autoplay.