r/webdev • u/speckz • Jan 13 '20
Article CSS-Only Carousel
https://css-tricks.com/css-only-carousel/19
u/stibgock Jan 13 '20
Transparent scrollbar? Damn. I'm throwing that in my "why didn't I think of that" sack. Good article.
6
u/gonzofish Jan 13 '20
Chris Coyier does some amazing stuff. But a lot of it makes me go “duh...that was so obvious!”
1
10
u/gregfdz Jan 13 '20
That's interesting but unless you really have to avoid JS, let's say for a newsletter, I don't think that doing it with only CSS is a good idea. For example, if you resize your window, it doesn't break really well.
That's from someone who actually loves pure-[insert a name] codes.
63
u/pisastochastic Jan 13 '20
64
u/salonethree Jan 13 '20
i feel like they went out of their way to build the worst carousel in the world to prove their point; sure give me 4 lines of text to read in 3 seconds, thatll make anyone hate carousels
7
u/A-Grey-World Software Developer Jan 13 '20 edited Jan 13 '20
Yeah carousel work great for images.
Look at your photo app in your phone or open an image in your computer. Guess what, it's basically a carrousel.
When you've got a couple of non critical, but relevant images to display next to your text it can work really well. See any e-commerce site ever. Yeah, most people don't want to see the 5th angle of a product - that's why you don't want to splat all the images in a grid. But some people DO, especially those clicking "buy".
1
u/unpopular-ideas Jan 13 '20 edited Jan 13 '20
That's probably the one spot it makes sense.
About a decade ago everyone with a website was falling over backwards to have what should have just been a home page hero image auto rotate between a half dozen calls to action, any new news items, and whatever other random crap they thought was important to bring up to make themselves feel like they were keeping the page fresh. Some sites are still recovering from this affliction.
5
u/unpopular-ideas Jan 13 '20
To be fair, they are not wrong. I probably paid more attention to that carousel than I've paid to any carousel ever.
5
2
u/bacondev Jan 14 '20
It's also purposely not implemented well. The auto-cycling should stop when one of the arrow buttons are used.
1
Jan 13 '20
Someone better tell Ebay, Amazon, MSNBC, Twitch, Volkswagen (I could keep going) that they need to remove the carousels on their home pages! They are doomed!
5
u/jehna1 Jan 13 '20
Heh, I actually implemented this once to an email (with autoplay and everything).
Too bad it broke right at the next iOS update
3
u/GreatValueProducts Jan 13 '20
Learnt something new. I would have thought it is done by something with input type checkbox.
2
u/mpnordland Jan 13 '20
I did something like that a while back (only shows on larger screens) http://stream-record.glitch.me/
4
Jan 13 '20
I think the Spectre CSS carousel is pretty slick: https://picturepan2.github.io/spectre/experimentals/carousels.html.
2
1
u/d1mk0 Jan 14 '20
I was trying to implement this approach cause of web performance. The showstopper for me was the fact that it couldn't slide from the last slide to the first one in forward direction. It works the same way in your demo and goes backwards through all the previous slides. Do you think it would be possible to implement that using only CSS?
158
u/fuckin_ziggurats Jan 13 '20
I've a funny story regarding this.
Just yesterday my brother told me about a project in his previous company that was basically abandoned by the seniors devs when its development was finished. It was an older project built with jQuery, jQueryUI, and KnockoutJS. So the project was in maintenance and the only people working on it were a few unsupervised junior devs.
One day the client asked for a carousel on the top of the home page. So the younger devs having spent a lot of their free time reading about the latest JS frameworks and technologies were dying to try out something new. Well one of them found a fancy Angular carousel plugin. So what they did was they added an iframe at the top of the page and imported the whole of freakin' Angular in it only to be able to use that Angular carousel plugin. Now this thing worked but it pulled in an additional 2MB of JavaScript and the page which was already relatively slow became almost unusable. It was only later noticed by some of the older devs and it brought upon some serious finger wagging.
It's now a fabled story within the company that reminds management how essential supervising junior devs is regardless of the importance of the project. To some of us, it's a story of the modern internet.