HTML and CSS Project Tutorial: Pure CSS Image Slider
HTML-код
- Опубликовано: 12 июн 2024
- 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
Best HTML/CSS carousel tutorial on RUclips. The explanations are amazing!
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
Thanks! That’s great to hear!
BEST TUTORIAL EVER. EASY TO FOLLOW AND SIMPLE. LOVE YOU MAN
Most helpful HTML/CSS tutorial I've seen so far.
Glad you enjoyed it!
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 👍🏾
Thanks for the sub!
@@Skillthrive is there a way to make it move automatic?
@@whitesky8013yea using js
Hats off to you man, I thought this could only be done with javascript
Extremely clean and simple example that is well explained.
I updated the CodePen to hide the scrollbar! Sorry I missed that in the tutorial.
Thanks for the video. I think it'll be better if you pin this comment.
Idk if you’ll see this but is there an alternative for aspect ratio?
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 )
Fantastic video! Spoken very clearly and everything explained in detail. A little fast, but still very good!
kurisutina
if you want to move the image inside the slider use object-position: 50% 50% (adjust this accordingly)
Just used this for one of my classes! Thank you!
You're very welcome!
u are like a god dude, you have just earned a subscription from Argentina! great videos, keep going!
Thanks, Juan! Glad to have your sub!
Simple, short and clear
Thanks, Andre.
Best tutorial ever on the internet 😮🚀
Goated video. You can slap this bad boy anywhere
With some modifications this will work well for me. Thanks for showing us the basic layout!
Glad it was helpful!
How simply simplified man . This is best video . Thank you very much .Best explanation 🔥❤️
Thanks, Pravin! Glad you found it helpful.
@@Skillthrive not even slider but also many css property like scroll type flex 10 100%; object fit cover ....it helps me a lot ..❤️❤️❤️
Thx! Very useful and easy to do! You are amazing!
Glad you enjoyed it, Arturo!
This video was great and to the point thank you.
You're welcome! Glad you found it useful.
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.
thank you bro helped a lot
how to prevent the browser from centering top of viewport on the anchor target?
thank you so much for the perfect tutorial
thank you. Very best and most important.
Thank you very much bro , very helpful content
Amazing tutorial!!! The one I really could use that perfectly works for my project! Many thanks!!!!
Thank you! I'm glad it worked for you.
Easy to understand. Thanks👍
Glad it helped!
Thanks for teaching... Good luck
how to remove the horizontal slider below it....????
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...
hey im working with photos of aspect ratio 4:3 what changes should i make ??
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?
Jazak Allah o Khairaa
Well done. I need this only for .mobile, and when on desktop I need to retain the image collage I've created. Any tips?
Sir when i click on anchor link button at bottom it opens image i have set there in new tab. What should i do?
Amazing... Your didactic is perfect!
Thank you!
Brilliant!
Your videos have been so helpful! Well done and thank you!
Glad I could help! Thank you!
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. :)
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.
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?
bro you save me and my friend from group project thankyou very much i love you!!
You are welcome
is it possible to add a autoplay video in this slider ??
How do you remove the slider bar at the bottom. It has the dots and the slider
how do I make whole thing stick to the Left side?
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?
I wrapped the img in to direct and the img became zoomed in, can someone help me?
and how to make this image auto move to left?
great video thanks
When I use scroll the page slides down, what can I do?
Usefull and W video bro
wow...its was smoooth
Bro this guy is very very underrated
Thank you!
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.
hi! it seems that i have the same problem as you can you tell me how you fixed it
pls
when i click on next button to move image my scrollbar scroll down, why???
but in this tutorial .. the active slide is not showing in dots..
Very clever using a tags!
Thank you! 😊
keep up the good work
i have 3 images but it's skipping 1 images when I slide, any help?
muchisimas gracias
Help whenever i click on the switch slide button it scrolls
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)
You can use animation for that
You Got a new Subscriber bro🙂
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 ? :(
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.
Thanks! Question: why set position relative in .slider-wrapper if it's the default position value ?
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
will this work in all browser... ?
So with this will the images slide automatically? Or do you have to use the nav to move them? Thank you great stuff here!
You have to use the nav bc this is basically a hacky way using CSS and anchor links.
@@Skillthrive is there a way to make it loop but also keep the nav please?
Great Work , I dont know where to find codepen , I actually would just love to use those images
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.
Nice explanation. How can I add arrows to the html or a swipe feature instead of the dots
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.
Great information. Nice video. Subscribed the channel
Glad to have you!
I have a problem that there is slider bar instead of these dots in the transition.
why there is a scrollbar under the image?
does this work for text to?
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
ok i've figured it out using overflow-x:hidden
Glad you got it!
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?
yes it requires java script
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.
Great, thanks for sharing! I'll have to try that out.
Thank you
You're welcome! 🤣
How to go to next slide with a tag without scrolling to the top ?? I am using . Nice video thank you.
are that problem already fixed?
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?
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.
@@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.
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.
@@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.
You are right. It was happen to me too and still don't know the solution
With this example, is it possible to crop the images when styling for smaller screens? How would it be?
Hello friend, did you find an answer for this?
Not yet 😅
adjust aspect ratio
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.
Hey there, have you found a solution to this yet? I'm having the same problem
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???
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
@@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();
}
});
You didn’t link the css, how did you do it?
Did he use
overflow:hidden; ???
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?
So we could retain the scroll behavior. The codepen should have updated code that hides the scroll bar.
@@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?
U can keep it and add overflow property and set it to hidden
Overflow : hidden ; that did the job for me at least
.slider::-webkit-scrollbar {
display: none;
}
I just want to ask. How are you able to hide the slider nav bar?
Nav bar? Do you mean scroll bar?
@@Skillthriveyes he means that, i have the same problem
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
Bro disable the scroll-snap-align: start; and it will work with effect
how is it possible that i can't see the animations?
my hovers are not working please help me
Subscribed
How can I make it auto slide
so it works but i still have the default slide bar thing at the bottom? what could that mean?
same here....
mata meka loku karana widiha kiyannako??
You got a SUB
Glad to have ya!
how about the color changing of the slider nav when it is on the pic
sorry bad grammar but pls can u understand
Bro how do you hide the scroll bar mines the scroll bar I want it to be like circles like yours
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) */
}
how to make this autoplay
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 :)
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!
@@Skillthrive "Unfortunately it looks like this solution isn't recommended because it uses "scrollIntoViewIfNeeded()" which is non-standard."
where can I see this solution?
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?
vscode
The tutorial was great. But there is a scroll bar under the slideshow how do i hide it?
I have the same problem. I've tried "overflow-x: hidden;" and it still doesn't work for me.
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