I added Comics to this site. It's just a sequence of images but wouldn't it be lovely if they were in a Carousel? That's what you call effects where you can move back and forth between images. It wouldn't be fair to need Javascript for something so simple right?
So I looked around and found this convenient list: Pure CSS Carousels! Naturally it would need to be horizontal (like a comic book) and use as much screen space as possible.
Going by the screenshots I instantly picked the one by David Lewis, it's got everything minus an index. Quickly making some changes to it and... wait, what the hell is this? You can see the background (white lines), there's no back button and there's an ever-increasing shift on the left. I later messed around with some parameters to reduce it, but I hated having to hack around.
Looking for another, this time I picked the one by Jhey. Since he has several css transition effects I just had to trim to the Sliding one and widen it. For some reason the keys don't work and he used a border for the side buttons so I couldn't change it much but that wasn't good without keyboard support so I gave the earlier one another shot.
This time I would try to understand my mistakes and, as it turns out, the extra spacing/shifts were caused by newlines between the <label> tags. To work around it I added them inside the tags:
<label
for="p1"><img src="archgeeks/agc_1.png" /></label><label
for="p2"><img src="archgeeks/agc_2.png" /></label><label
for="p3"><img src="archgeeks/agc_3.png" /></label><label
for="p4"><img src="archgeeks/agc_4.png" /></label><label
for="p5"><img src="archgeeks/agc_5.png" /></label><label
for="p6"><img src="archgeeks/agc_6.png" /></label><label
for="p7"><img src="archgeeks/agc_7.png" /></label><label
for="p8"><img src="archgeeks/agc_8.png" /></label><label
for="p9"><img src="archgeeks/agc_9.png" /></label><label
for="p10"><img src="archgeeks/agc_10.png" /></label>
But the back buttons (on the left) were also missing, which was because I simplified this:
input:nth-of-type(1):checked ~ label:nth-of-type(1),
input:nth-of-type(2):checked ~ label:nth-of-type(2),
input:nth-of-type(3):checked ~ label:nth-of-type(3),
input:nth-of-type(4):checked ~ label:nth-of-type(4),
input:nth-of-type(5):checked ~ label:nth-of-type(5),
input:nth-of-type(6):checked ~ label:nth-of-type(6),
input:nth-of-type(7):checked ~ label:nth-of-type(7),
input:nth-of-type(8):checked ~ label:nth-of-type(8),
input:nth-of-type(9):checked ~ label:nth-of-type(9),
input:nth-of-type(10):checked ~ label:nth-of-type(10){ z-index: 0; }
Into input:checked ~ label{ z-index: 0; }.
All in all I love this solution but there's quite a few details that you should keep in mind. You can see the fully functional carousel, here and see its un-minified source, here.
I also tried to use it with <flexbox> but the next button is missing on Page 1. It shows up if you click or by adding checked="checked" to the first <input> element like Jhey did but you'll lose the keyboard controls.
And there we have it, a nice Carousel that doesn't require Javascript. If you really need an index it's a matter of making the <input> tags visible but I didn't bother. In comparison, Jhey did several nice ones with an index but they are harder to use as you need to specify where every side button goes. Note however that he used Pug and Stylus to simplify his HTML/CSS and, having compiled it, there are diferences.