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

[@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.

[@anthonychen7224]

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

[@Skillthrive]

Glad you enjoyed it!

[@officersmiles9114]

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

[@tailus-dev6269]

kurisutina

[@yokidrift1720]

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

[@Skillthrive]

Glad it was helpful!

[@6100poiuy]

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

[@Skillthrive]

You're very welcome!

[@chuk_udi]

Goated video. You can slap this bad boy anywhere

[@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!

[@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

[@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)

[@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 ..❤️❤️❤️

[@kanna467_]

Thank you very much bro , very helpful content

[@arturonicolasjuarez9175]

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

[@Skillthrive]

Glad you enjoyed it, Arturo!

[@RipperTiger]

thank you so much for the perfect tutorial

[@fuadagayev-mg7fk]

thank you. Very best and most important.

[@naturesmusic1171]

Simple, short and clear

[@Skillthrive]

Thanks, Andre.

[@DatsunZ73]

This video was great and to the point thank you.

[@Skillthrive]

You're welcome! Glad you found it useful.

[@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.

[@umarmuzammil7332]

thank you bro helped a lot

[@dashakacreation]

Thanks for teaching... Good luck

[@RIZzKHAN-kp3vq]

Easy to understand. Thanks👍

[@Skillthrive]

Glad it helped!

[@justapoorliver3286]

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

[@Skillthrive]

You are welcome

[@Trexvsunkasa]

Brilliant!

[@TalalSaghir]

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

[@evertonfonseca6017]

Amazing... Your didactic is perfect!

[@Skillthrive]

Thank you!

[@kamdanibwp]

Jazak Allah o Khairaa

[@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?

[@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. :)

[@nsa3679]

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

[@abhisheksonar2378]

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

[@Lollipop-gx8yy]

wow...its was smoooth

[@andrewmurrie1538]

great video thanks

[@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.

[@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.

[@eduargalvan7123]

muchisimas gracias

[@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

[@NetherFrog]

Usefull and W video bro

[@slowedrelaxed]

You Got a new Subscriber bro🙂

[@toonice555]

Very clever using a tags!

[@Skillthrive]

Thank you! 😊

[@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...

[@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?

[@hariprasatht9082]

keep up the good work

[@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?

[@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.

[@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.

[@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?

[@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

[@mehdi.drkixxix]

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

[@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?

[@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

[@raunak_saha]

Bro this guy is very very underrated

[@Skillthrive]

Thank you!

[@themodernneeds1832]

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

[@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?

[@codingandEnglishlearning]

Great information. Nice video. Subscribed the channel

[@Skillthrive]

Glad to have you!

[@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.

[@Hshdhxhdjsj]

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

[@ustllys]

Thank you

[@Skillthrive]

You're welcome! 🤣

[@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

[@melodia6875]

Subscribed

[@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.

[@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?

[@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!

[@achmadfauzanaliffitrah]

and how to make this image auto move to left?

[@usamongwilliam]

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

[@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 😅

[@santiiug]

adjust aspect ratio

[@closedforester338]

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

[@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

[@ShadowAmitendu]

You got a SUB

[@Skillthrive]

Glad to have ya!

[@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

[@justkailash]

will this work in all browser... ?

[@soyunaplanta7457]

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

[@JoseCynonQLuna]

I want it to auto slide, how do i do that? Great video btw well deserve a sub

[@sofiamontero14]

javaScript

[@user-jd2rs8iw1g]

does this work for text to?

[@ozclips.official]

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

[@Idk65789]

Help whenever i click on the switch slide button it scrolls

[@joshuasinlao4164]

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

[@melvinwi651]

GOOD

[@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(); } });

[@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

[@Tech-tion55]

Did he use overflow:hidden; ???

[@justkailash]

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

[@MZGAMEZZ]

Bro how do you hide the scroll bar mines the scroll bar I want it to be like circles like yours

[@boyoishere]

it depends on the browser, but you can add this to ur CSS code. It worked for me: .slider { scrollbar-width: none; /* Firefox */ -ms-overflow-style: none; /* Internet Explorer and Microsoft Edge */ } .slider::-webkit-scrollbar { display: none; /* WebKit (Safari and Chrome) */ }

[@zemitsu6246]

how about the color changing of the slider nav when it is on the pic

[@zemitsu6246]

sorry bad grammar but pls can u understand

[@typo7050]

why there is a scrollbar under the image?

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

[@svdden_strike]

How can I make it auto slide

[@ninguem9726]

The tutorial was great. But there is a scroll bar under the slideshow how do i hide it?

[@keithfrank7178]

I have the same problem. I've tried "overflow-x: hidden;" and it still doesn't work for me.

[@boyoishere]

it depends on the browser, but you can add this to ur CSS code. It worked for me: .slider { scrollbar-width: none; /* Firefox */ -ms-overflow-style: none; /* Internet Explorer and Microsoft Edge */ } .slider::-webkit-scrollbar { display: none; /* WebKit (Safari and Chrome) */ }@@keithfrank7178

[@harshwagh7016]

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

[@vxruzdanz]

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

[@yourlocalhuman3526]

same here....

[@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

[@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

[@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?

[@jo-iii]

While it may not be visible in codepen, setting `overflow-x` to `auto` will show a scrollbar beneath. It was mentioned but never brought up again. Setting it to `hidden` will match the same output in a browser.

[@manuelcastro6307]

HIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII Pls help me how do i resize the images because idk how to do it and this is for my computer subject HEHE thank u