HTML and CSS Project Tutorial: Pure CSS Image Slider

Let's walk through this HTML and CSS tutorial to create a responsive image slider with only HTML and CSS!
🗂 CODE: skillthrive.gumroad.com/l/cgybb
⏰ TIMESTAMPS ⏰
Introduction: 0:00
HTML: 0:21
CSS: 1:35
🔗 HELPFUL RESOURCES 🔗
A Complete Guide to Links and Buttons:
css-tricks.com/a-complete-gui...
A Complete Guide to Flexbox:
css-tricks.com/snippets/css/a...
❤️ INSPIRATION ❤️
Emilio Dominguez: codepen.io/emilio-dominguez/p...
🥰 FOLLOW ME 🥰
Twitter: / hunterbecton
👋 FOLLOW SKILLTHRIVE 👋
Twitter: / skillthrive
#html #css #coding

[@noahthegreat190]

bro wtf i think this is the best coding tutorial ive ever seen (and i spent 5 years @ CS in Uni). Clean and concise english and explanation, less than 10 min, and good audio. W channel

[@Skillthrive]

Thanks! That’s great to hear!

[@glorysinkhonde197]

Best HTML/CSS carousel tutorial on KZbin. The explanations are amazing!

[@Karmator]

BEST TUTORIAL EVER. EASY TO FOLLOW AND SIMPLE. LOVE YOU MAN

[@arsenedjumbe5914]

I couldn't believe that with just HTML and CSS something like this could have been achieved Man, you've just earned a subscription Great content 👍🏾

[@Skillthrive]

Thanks for the sub!

[@whitesky8013]

@@Skillthrive is there a way to make it move automatic?

[@me-hu-ruhi]

​@@whitesky8013yea using js

[@anthonychen7224]

Most helpful HTML/CSS tutorial I've seen so far.

[@Skillthrive]

Glad you enjoyed it!

[@petrus2746]

Hats off to you man, I thought this could only be done with javascript

[@antonioglavocevic3844]

Extremely clean and simple example that is well explained.

[@juanmartinkuasnosky55]

u are like a god dude, you have just earned a subscription from Argentina! great videos, keep going!

[@Skillthrive]

Thanks, Juan! Glad to have your sub!

[@chuk_udi]

Goated video. You can slap this bad boy anywhere

[@svdden_strike]

Best tutorial ever on the internet 😮🚀

[@andrecarcausto2740]

if you want to move the image inside the slider use object-position: 50% 50% (adjust this accordingly)

[@officersmiles9114]

Fantastic video! Spoken very clearly and everything explained in detail. A little fast, but still very good!

[@tailus-dev6269]

kurisutina

[@Skillthrive]

I updated the CodePen to hide the scrollbar! Sorry I missed that in the tutorial.

[@y01cu_yt]

Thanks for the video. I think it'll be better if you pin this comment.

[@duckpanther6768]

Idk if you’ll see this but is there an alternative for aspect ratio?

[@mohamedftita9664]

Hi thnks for the awesome tutorial . There is a tiny detail I wanna tell you about if you use this method in a full website it will always take the user back to this section (when the user scrolled down to see the other section )

[@TalalSaghir]

No problem

[@juniorpeter3485]

Where is the video

[@mind_blazed]

How simply simplified man . This is best video . Thank you very much .Best explanation 🔥❤️

[@Skillthrive]

Thanks, Pravin! Glad you found it helpful.

[@mind_blazed]

@@Skillthrive not even slider but also many css property like scroll type flex 10 100%; object fit cover ....it helps me a lot ..❤️❤️❤️

[@6100poiuy]

Just used this for one of my classes! Thank you!

[@Skillthrive]

You're very welcome!

[@greenparksquad6336]

You're a great dev-youtuber. Able to explain and implement the feature so simply. I had completely different page structure and design but thanks to your guide I implemented slide so fast and easily. no tons of redudant code like in other guides

[@Skillthrive]

Glad I could help!

[@abhisheksonar2378]

hey im working with photos of aspect ratio 4:3 what changes should i make ??

[@yokidrift1720]

With some modifications this will work well for me. Thanks for showing us the basic layout!

[@Skillthrive]

Glad it was helpful!

[@chipyyyyy]

How can i make that when i click any of the buttons it moves the page and puts the images in the top of the users view, i mean when i click if i've scrolled down it puts me up again, i don't know if someone could help me please, thanks.

[@emileguiza8698]

I have a problem, only two of the three images that I used appear and a slider bar continues to appear below the three dots, what can i do?

[@nsa3679]

how to prevent the browser from centering top of viewport on the anchor target?

[@yuganshmehta]

Sir when i click on anchor link button at bottom it opens image i have set there in new tab. What should i do?

[@umarmuzammil7332]

thank you bro helped a lot

[@naturesmusic1171]

Simple, short and clear

[@Skillthrive]

Thanks, Andre.

[@degubaertv]

How can i prevent Jumping on Click at the Dots? It always jumps up, till the slider reaches the top. and that everytime i click a Dot...

[@RipperTiger]

thank you so much for the perfect tutorial

[@kanna467_]

Thank you very much bro , very helpful content

[@Trexvsunkasa]

Brilliant!

[@arturonicolasjuarez9175]

Thx! Very useful and easy to do! You are amazing!

[@Skillthrive]

Glad you enjoyed it, Arturo!

[@kamdanibwp]

Jazak Allah o Khairaa

[@fuadagayev-mg7fk]

thank you. Very best and most important.

[@DatsunZ73]

This video was great and to the point thank you.

[@Skillthrive]

You're welcome! Glad you found it useful.

[@peridiusoverlord]

Hey, I can't figure out how to navigate to your CodePen page. I'm trying to reference your work properly in an APA format document.

[@olgakinasz8368]

Amazing tutorial!!! The one I really could use that perfectly works for my project! Many thanks!!!!

[@Skillthrive]

Thank you! I'm glad it worked for you.

[@dashakacreation]

Thanks for teaching... Good luck

[@TalalSaghir]

Bro, you solved my problem completely...............

[@RIZzKHAN-kp3vq]

Easy to understand. Thanks👍

[@Skillthrive]

Glad it helped!

[@Human_Evolution-]

Well done. I need this only for .mobile, and when on desktop I need to retain the image collage I've created. Any tips?

[@evertonfonseca6017]

Amazing... Your didactic is perfect!

[@Skillthrive]

Thank you!

[@themodernneeds1832]

how to remove the horizontal slider below it....????

[@mehdi.drkixxix]

is it possible to add a autoplay video in this slider ??

[@justapoorliver3286]

bro you save me and my friend from group project thankyou very much i love you!!

[@Skillthrive]

You are welcome

[@usamongwilliam]

I wrapped the img in to direct and the img became zoomed in, can someone help me?

[@Lollipop-gx8yy]

wow...its was smoooth

[@JericJohnJuegos]

does anyone know how to remove the position change of the scroll bar after clicking the buttons? What happened to me was I added this to a wepage but it keeps on sliding back to the image itself. can anyone help me?

[@niftyandy9152]

Your videos have been so helpful! Well done and thank you!

[@Skillthrive]

Glad I could help! Thank you!

[@kasparkado7303]

Thank you for this tutorial! It almost works for me, the only problem is that I can't see the dots and the slider only works with arrows, not with cursor. I did everything the way you did, except I have a header with a navigation bar in my project. Any solution for this? I'm an absolute beginner, it's my 1st week of coding. :)

[@closedforester338]

how do I make whole thing stick to the Left side?

[@soyunaplanta7457]

When I use scroll the page slides down, what can I do?

[@NetherFrog]

Usefull and W video bro

[@andrewmurrie1538]

great video thanks

[@achmadfauzanaliffitrah]

and how to make this image auto move to left?

[@hariprasatht9082]

keep up the good work

[@joshuasinlao4164]

i have 3 images but it's skipping 1 images when I slide, any help?

[@Hshdhxhdjsj]

How do you remove the slider bar at the bottom. It has the dots and the slider

[@wolfie8748]

Can I make these images responsive ? as In I want to put my personal projects so recruiter can click on them and go to another link?

[@Idk65789]

Help whenever i click on the switch slide button it scrolls

[@user-uc8cp9ob1v]

Is there a way to let the picture transition it automatically - but only, if the user does not hover or click on the slider for a minute? (only html and css)

[@boothecuteghost7053]

You can use animation for that

[@justkailash]

but in this tutorial .. the active slide is not showing in dots..

[@ozclips.official]

when i click on next button to move image my scrollbar scroll down, why???

[@eduargalvan7123]

muchisimas gracias

[@raunak_saha]

Bro this guy is very very underrated

[@Skillthrive]

Thank you!

[@Tech-tion55]

Did he use overflow:hidden; ???

[@5Farron_pv]

great video ! I have a problem, i added your image slider into my page which has many images that you can scroll down, when i click on the anchor link, my page teleport himself into the image in the slider, how can I avoid that ? :(

[@Skillthrive]

Thank you! Unfortunately it’s a bit hacky considering that’s the default behavior of anchor links. 😔 I should’ve been more clear about that, but I’ve shared some info in the comments about some work arounds.

[@toonice555]

Very clever using a tags!

[@Skillthrive]

Thank you! 😊

[@typo7050]

why there is a scrollbar under the image?

[@MrBumblebee]

If i were scrolled down the window and clicked the href button , it seems that it takes me to the top of the window where the image slider is located.Is there a way to fixx that? other than that , the video is really cool.

[@FLujb]

hi! it seems that i have the same problem as you can you tell me how you fixed it pls

[@justkailash]

will this work in all browser... ?

[@melodia6875]

Subscribed

[@claudevonbrandis4772]

Great Work , I dont know where to find codepen , I actually would just love to use those images

[@Skillthrive]

Thank you! It’s the Gumroad link in the description. You can pay what you want and it will redirect you to the CodePen. The images are from Unsplash.

[@svdden_strike]

How can I make it auto slide

[@user-jd2rs8iw1g]

does this work for text to?

[@harshwagh7016]

I have a problem that there is slider bar instead of these dots in the transition.

[@EmrrysRoyce]

You didn’t link the css, how did you do it?

[@JTJaniceTek]

how do i remove the scrollbar which allows me to scroll to the left and right (below the buttons)? let's say i just want to press the buttons in order to slide

[@JTJaniceTek]

ok i've figured it out using overflow-x:hidden

[@Skillthrive]

Glad you got it!

[@ShadowAmitendu]

You got a SUB

[@Skillthrive]

Glad to have ya!

[@codingandEnglishlearning]

Great information. Nice video. Subscribed the channel

[@Skillthrive]

Glad to have you!

[@squaremale]

Thanks! Question: why set position relative in .slider-wrapper if it's the default position value ?

[@squaremale]

Actually, the default position property is static. The reason .slider-wrapper position is set to relative is to make .slider-nav relative to .slider-wrapper when using the left property

[@ustllys]

Thank you

[@Skillthrive]

You're welcome! 🤣

[@Vivek-up9st]

my hovers are not working please help me

[@rdzn.noccio9867]

how is it possible that i can't see the animations?

[@JeanRomanRoaming]

This slider is great - however I am having trouble because the slider container jerks up under my menu navbar when the slide changes. Any idea how to fix this to make the slider container NEVER jerk up under the navbar???

[@Skillthrive]

It’s because this is a “hack” that uses anchor tags to achieve the effect. Unfortunately, a side effect is the issue you’re running into. I covered this issue on our Discord, but this guy covered a solution in this post: markus.oberlehner.net/blog/super-simple-progressively-enhanced-carousel-with-css-scroll-snap/ However, the method he uses isn’t recommend by Mozilla: developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoViewIfNeeded

[@JeanRomanRoaming]

​@@Skillthrive Thank you for the response. I've read thru the links but I am unsure about how to implement the solution. I am a novice. Your help is much appreciated. Where Do I insert the code? Do I need a seperate .js file? or where do I insert - the code - it into my html or css? files ? do I insert in under: section class="container-slider" or div class="slider-wrapper", or div class="slider", or img id="slide-1". ???? THE CODE: document.querySelector('#controls').addEventListener('click', (event) => { const $slide = document.querySelector(event.target.getAttribute('href')); if (!$slide) return; if ($slide.scrollIntoViewIfNeeded) { event.preventDefault(); $slide.scrollIntoViewIfNeeded(); } else if ($slide.scrollIntoView) { event.preventDefault(); $slide.scrollIntoView(); } });

[@Allformyequine]

So with this will the images slide automatically? Or do you have to use the nav to move them? Thank you great stuff here!

[@Skillthrive]

You have to use the nav bc this is basically a hacky way using CSS and anchor links.

[@sushibali6522]

@@Skillthrive is there a way to make it loop but also keep the nav please?

[@ALPHA-vu7im]

mata meka loku karana widiha kiyannako??

[@mugriciolacri1390]

Thanks for the tutorial. It works, but when i click on the dots and the images slide, the page scrolls down. I also tried your code and the same thing happens. This method doesn't seem viable.

[@boyoishere]

Hey there, have you found a solution to this yet? I'm having the same problem

[@Badget007]

I just want to ask. How are you able to hide the slider nav bar?

[@Skillthrive]

Nav bar? Do you mean scroll bar?

[@domi_ka9153]

@@Skillthriveyes he means that, i have the same problem

[@armaanbrar6406]

Nice explanation. How can I add arrows to the html or a swipe feature instead of the dots

[@Skillthrive]

You’ll need to bring in JavaScript. It will need to track how many images you have and then calculate the end/beginning depending on which image is active.

[@Ali-rh4wl]

Thanks for the content. But there is no need to use transiton. If you just add the scroll-behaviour:smooth to parent of pages. It works. Can you do it with just transition, not scroll behaviour.

[@Skillthrive]

Great, thanks for sharing! I'll have to try that out.

[@jkviedeos8598]

Your tutorial was extremely helpful. Thank you. I have the problem, that, whenever i click on the nav buttons, the page jumps down, so that the image slider comes to the upmost top of the slider and i'm really not sure why. Do you have any idea?

[@Skillthrive]

Thank you! Glad you found it helpful. As for your problem, it sounds like you have something wrong with the anchor links. Also just double check your html.

[@jkviedeos8598]

@@Skillthrive Hello, thank you for your fast response. So, i checked the HTML and the CSS and found nothing, that i would be aware could cause something like that. So i made a test html-file, linked it to another test css-file and copied all of your code exactly as it is. Then, for test purposes i created a div, with the class "Titel" and in the css i gave it the value "padding-top:30%;"; so that i have something above to control, if the page is still skiping. And yes, it actually is. It also happens in your CodePen, if you shrink down the sites size. I should note, that i'm using firefox.

[@Skillthrive]

Hey, sorry for the late reply. For some reason your comment was flagged for review. Anyways, I looked into the issue and could only get it with Firefox developer edition. For some reason "aspect-ratio" is considered an invalid property. In the latest Firefox everything worked as expected.

[@markf8639]

@@Skillthrive I think what is being suggested here is that on click, due to default browser behavior the browser is scrolling/jumping to the #(id) being clicked, as it should do with an internally linked href. Its happening on every browser i have tested.

[@aaw9004]

You are right. It was happen to me too and still don't know the solution

[@minhphamcong7616]

How to go to next slide with a tag without scrolling to the top ?? I am using . Nice video thank you.

[@Em_..]

are that problem already fixed?

[@HHcz]

The whole thing works perfectly fine but there's a horizontal scroll bar that appears at the bottom. How do I get rid of it? edit: I changed the overflow-x to hidden and it solved it sooo why did we need to keep it at auto?

[@Skillthrive]

So we could retain the scroll behavior. The codepen should have updated code that hides the scroll bar.

[@HHcz]

@@Skillthrive btw everytime I click on the dots to switch between pictures the whole page moves to a position where the container is positioned on the top. How do I make it so that it doesn't move me around?

[@kossylazy2730]

U can keep it and add overflow property and set it to hidden Overflow : hidden ; that did the job for me at least

[@moonlightgirl2332]

.slider::-webkit-scrollbar { display: none; }

[@astnla]

I love this one! Just one question, is there anyway to make it slide by itself instead of having to click it, or will that require JS?

[@jonasgarnier492]

yes it requires java script

[@ivonnea.462]

With this example, is it possible to crop the images when styling for smaller screens? How would it be?

[@scoggo]

Hello friend, did you find an answer for this?

[@ivonnea.462]

Not yet 😅

[@hatesanti]

adjust aspect ratio

[@Franciscorsilvaaa]

I have no ideia why but when i click in the buttons my page kinda scrolls a bit down, if any 1 could help me o would apreciate it :)

[@Skillthrive]

Yeah, I discussed this on our Discord. It's because this uses anchor links. I found a solution someone posted for a similar project (at the bottom) markus.oberlehner.net/blog/super-simple-progressively-enhanced-carousel-with-css-scroll-snap/ Unfortunately it looks like this solution isn't recommended because it uses "scrollIntoViewIfNeeded()" which is non-standard. If anyone knows a better solution for production, let me know!

[@sofiamontero14]

@@Skillthrive "Unfortunately it looks like this solution isn't recommended because it uses "scrollIntoViewIfNeeded()" which is non-standard." where can I see this solution?

[@hayk9122]

Hey there, I'm using Notepad++ and the command "flex" isn't working. Could you please tell me how to fix it or the name of another free app I can use for html and CSS please?

[@zwabbah4841]

vscode

[@ar7xhd250]

how to make this autoplay

[@vxruzdanz]

so it works but i still have the default slide bar thing at the bottom? what could that mean?

[@yourlocalhuman3526]

same here....

[@munizrobson5292]

Hey guys are the LINKS working for you? I mean, the arrows is ok, but when I click in the 3 dotes, it goes straight to the image without any effect at all

[@vivekraghuwanshi9756]

Bro disable the scroll-snap-align: start; and it will work with effect

[@ezichichita2997]

I couldn't see the slider on my webpage and the scroll bar is still in mine

[@SlazhhDGame]

My nav is not working