The Best Way To Make A CSS Only Carousel In 2024

[@sreekar_s]

Awesome content. I have a small suggestion. It would be great if you make the IDE little bit bigger. Thank you

[@jshstuff]

I personally wouldn't do the extra height + overflow trick to get rid of the scrollbars. I find that scrollbar-width:none and ::-webkit-scrollbar {display: none} does the trick for me, without having to add an extra wrapper div. The way you showed probably has slightly better browser support though.

[@frontendfyi]

Exactly that! The WebKit trick is really neat, but doesn’t work in all browsers. If that would become a widely adopted standard it’s of course far superior to my “hack”. Could’ve probably explained that a bit better in the video 😁 Thanks for commenting this!

[@jshstuff]

Great stuff, worth the 30 mins for all the steve jobs knowledge drops throughout. Agreed 100% with your take at the end that javascript's job should be to enhance the experience with things that are not critical to the user - even though I think people who disable javascript are insane :)

[@frontendfyi]

Thanks for your kind words 🥰 Haha and I agree that people who disable JS “just because” are insane 🤣 But as developers we usually develop on fast machines, and all assets are served from our local machine. However, there’s so many reasons why the internet would be slow (also think on the move in a train, a tunnel even), during which the JS might not have loaded yet. Even in those cases having JavaScript enhance the experience instead of being the only way is super valuable 🙏

[@buletinbuletin7656]

Im more of a fan of using gaps for flexbox instead of margin. So on the listitem I would use gap-5 instead of mr-5, with gap you also didint need the specify the last item. But its totally the same right?

[@frontendfyi]

Yes good point! Your are totally right. I will also try to use it more often 😁

[@iAmTheWagon]

High quality and informative. May this channel be successful.

[@saisurajprathigadapa8121]

Great Video. I actually tried implementing the same in one of my projects unfortunately the scrolling on clicking the arrows was not very smooth. So i inspected the apple store ui and found that when someone clicks on the arrows they are making overflow:hidden and then translating the items by certain amount of px and once it gives us a smooth scrolling using animation they are setting overflow to scroll and whatever the amount of px that is translated is being set to scrollleft property. I am not certain but would imagine that they are doing it like i mentioned. I implemented it in Angular since that's the tech stack we used in our project but i see a glitch after setting that scrollleft value. Problem Statement : Assuming that we are in the middle of the carousel and the scrollleft is at 100px when user clicks on right arrow i make overflow hidden and translate content by 100px and then i make overflow scroll and then set the total 200px to scrollleft. Here when setting 200px the scrollleft immediately becomes 0px for some reason and then takes value 200px which i gave. I would really appreciate your opinion and guidance on this. Thank you 😊

[@tahiyalalgerie6587]

Hello! can you make us a small project from 0 that an intermediate frontend engineer can do (maybe with next or react)? thanks a lot, love your tutorials

[@frontendfyi]

Did you see the Linear website rebuild series I’m doing? Is that too big?

[@denniszenanywhere]

Yes it would be great to see a production-ready project.

[@frontendfyi]

Check this playlist. It’s a full build from a-z and production ready. New parts are still being released. Rebuilding Linear's Homepage With Next.js and Tailwind kzbin.info/aero/PLTkt3SQxtPEQqpE5iwcuSPCmRYyAATIlR

[@tahiyalalgerie6587]

@@frontendfyiI'm watching the 1st part of the tutorial of linear. it's just amazing. I have learned a lot of things already. there are things that I knew how to do but in an unintelligent way. high quality content thanks .

[@tahiyalalgerie6587]

@@frontendfyi not too big :) I have already learned a lot with it, I just thought it was for beginners

[@key_michael]

Love it. What about a Bootstrap 5 version of this one? Or pure css and javascript?

[@farfarjam]

I really loved it. It was full of details and you explained everything. thanks a lot

[@ilmanmanarulqori5632]

Awesome work, keep going sir. Thank you

[@sumitmehra5119]

Ohh. Been trying to implement for a long time. Worth it.

[@Andy-pr5be]

Tbh that pair of lenses look really cool

[@rahathosen8441]

Awesome, is your Linear website rebuild series end? maybe you should took more part of the Linear.

[@frontendfyi]

No there are more episodes coming soon! 🙏

[@seanbrydon1230]

I reckon you should make a weekly scheduler in react 😜

[@frontendfyi]

That’s not on my agenda yet…. 🫣

[@deepak8586]

I really like those kind of minimalistic clothes!! they are cool! and tutorial is awesome!!

[@Mater-code]

This is the most underrated carouesl tutorial tbh. title should be something like "Best way to make carousel" [my opinion]

[@frontendfyi]

I love your suggestion! Realizing lately that indeed my “bad” titles might be my biggest limiting factor in growth. Just don’t want people to call my videos clickbait, since they do offer so much value 😂 Gonna try this suggestion though, thank you!

[@Mater-code]

@@frontendfyi Yes! in fact I didn't click the video at first 😂😅because I thought it was an "extra knowledge" kind of video YK because of that, there is no JS only css thing. most people would not even think that's possible. Anyway, I made a great decision clicking your video. Will surely watch more. Goodluck 🍀

[@frontendfyi]

@Mater-code thank you so much! I love hearing your thinking process. I can learn a lot about how my target audience thinks this way. Thank you! 😁 Would love to hear what you think about my Apple iPad page animation (3 videos ago). I think you will definitely like it, but probably didn’t click because of the title again 😁

[@Mater-code]

@@frontendfyi I might sound like I'm complaining too much 😅 but I think that the thumbnail "representation of the outcome" is black and white which makes it really hard to figure out what the video is about. At first glance, It looked like some sick graphite art video. I think a more colorful and "Apple-like approach" if that makes any sense, would be great!. and by the way the content is crisp and nice as always. I was watching the "Recreating Apple website video just before and I think that video has a good title and thumbnail. That video also seems to be doing great with almost 17K views.

[@frontendfyi]

Not at all complaining! This info is super useful to me. Please keep it coming 😁 Also thanks for the compliments! I totally agree that the content is super good! Now the goal is to make the best titles and thumbnails so as many people as possible click. Because that is what eventually keeps the channel alive 😁 So again, never feel afraid to give tips or other comments. I’m happy to learn. I’m not a good influencer at all, hahaha. Just a guy who knows how to build great frontend code, and can explain how to do it too 🤓

[@alexpanteli3651]

Great video!

[@ExileEditing]

Learned some cool things from this, thanks

[@frontendfyi]

Thanks for always watching my videos immediately when they’re released 🤩

[@AM-nm6ts]

I haven't finished the previous vieo yet but thank you, I learned a lot. in your tutorials there are new things that I did not find in all the tutorials that I watched before

[@frontendfyi]

Thank you so much, really love hearing this 🥰

[@AM-nm6ts]

@@frontendfyi ❤❤

[@81NARY]

So many cool tricks!

[@frontendfyi]

Thank you my friend! 🙏

[@mrkanata7696]

nice, great job :)

[@frontendfyi]

Thank you! Cheers!