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;}