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 )
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
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
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.
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.
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.
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.
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)
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
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
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.
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 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?
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.
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?
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. :)
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
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
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?
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.
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?
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(); } });
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) */ }
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
Best HTML/CSS carousel tutorial on UA-cam. The explanations are amazing!
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 )
No problem
Where is the video
Hats off to you man, I thought this could only be done with javascript
Extremely clean and simple example that is well explained.
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!
if you want to move the image inside the slider use object-position: 50% 50% (adjust this accordingly)
BEST TUTORIAL EVER. EASY TO FOLLOW AND SIMPLE. LOVE YOU MAN
Fix to hide horizontal scroll bar:
.slider {
display: flex;
aspect-ratio: 16 / 11;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
box-shadow: 0 1.5rem 3rem -0.75rem hsla(0, 0%, 0%, 0.25);
border-radius: 1rem;
-webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
}
.slider::-webkit-scrollbar {
display: none; /* Safari and Chrome */
}
Most helpful HTML/CSS tutorial I've seen so far.
Glad you enjoyed it!
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
Glad I could help!
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!
Fantastic video! Spoken very clearly and everything explained in detail. A little fast, but still very good!
kurisutina
Goated video. You can slap this bad boy anywhere
Just used this for one of my classes! Thank you!
You're very welcome!
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.
With some modifications this will work well for me. Thanks for showing us the basic layout!
Glad it was helpful!
Simple, short and clear
Thanks, Andre.
Bro, you solved my problem completely...............
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 ..❤️❤️❤️
Best tutorial ever on the internet 😮🚀
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...
how to remove the horizontal slider below it....????
Bro this guy is very very underrated
Thank you!
bro you save me and my friend from group project thankyou very much i love you!!
You are welcome
how to prevent the browser from centering top of viewport on the anchor target?
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.
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
Easy to understand. Thanks👍
Glad it helped!
Did he use
overflow:hidden; ???
when i click on next button to move image my scrollbar scroll down, why???
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.
but in this tutorial .. the active slide is not showing in dots..
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.
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
How do you remove the slider bar at the bottom. It has the dots and the slider
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
and how to make this image auto move to left?
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?
Amazing... Your didactic is perfect!
Thank you!
This video was great and to the point thank you.
You're welcome! Glad you found it useful.
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
@@vivekraghuwanshi9756 tysm dawgg
@@vivekraghuwanshi9756 Thanks so much for this! Was stalking the comments to see if anyone found a fix.
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!
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
Thx! Very useful and easy to do! You are amazing!
Glad you enjoyed it, Arturo!
thank you so much for the perfect tutorial
Thanks for teaching... Good luck
I couldn't see the slider on my webpage and the scroll bar is still in mine
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;
}
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.
thank you bro helped a lot
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.
Very clever using a tags!
Thank you! 😊
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.
thank you. Very best and most important.
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?
Thank you very much bro , very helpful content
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?
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. :)
Jazak Allah o Khairaa
wow...its was smoooth
Your videos have been so helpful! Well done and thank you!
Glad I could help! Thank you!
I have a problem that there is slider bar instead of these dots in the transition.
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
@@keithfrank7178 .slider::-webkit-scrollbar {
display: none; /* Safari and Chrome */
}
paste it to css
hey im working with photos of aspect ratio 4:3 what changes should i make ??
is it possible to add a autoplay video in this slider ??
Sir when i click on anchor link button at bottom it opens image i have set there in new tab. What should i do?
How can I make it auto slide
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
Brilliant!
Help whenever i click on the switch slide button it scrolls
why there is a scrollbar under the image?
i have 3 images but it's skipping 1 images when I slide, any help?
When I use scroll the page slides down, what can I do?
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
Well done. I need this only for .mobile, and when on desktop I need to retain the image collage I've created. Any tips?
I wrapped the img in to direct and the img became zoomed in, can someone help me?
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?
You got a SUB
Glad to have ya!
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?
so it works but i still have the default slide bar thing at the bottom? what could that mean?
same here....
bro it's not smooth, whenever I click on button it instantly changes to next image. please help me make it smooth ---- btw loved your tutorials :)
I got a problem overflow-x: auto;
Causes a scroll bar pls help
I updated the CodePen to remove the scrollbar! Checkout the "slider" and ".slider::-webkit-scrollbar" styles.
@@Skillthrive thanks for responding ❤💕💖
@@Skillthrive scroll bar disappears but it doesn't slide automatic over time but it works perfectly manual pls give some tip for autoplay the slide
@@gamingtomusic7700 You'll need to implement JavaScript to have an automatic sliding effect, but that falls outside the scope of this tutorial.
@@Skillthrive thank you❤🌹
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?
how this section becomes full screen because it is to be used as a home page
how do I make whole thing stick to the Left side?
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
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
keep up the good work
how about the color changing of the slider nav when it is on the pic
sorry bad grammar but pls can u understand
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
Thank you
You're welcome! 🤣
How do i get rid of the scroll bar. I don't know about his screen but on mine it appears white and is very obvious.
overflow-x: hidden instead of auto did the job for me
how is it possible that i can't see the animations?
Usefull and W video bro
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();
}
});
I want it to auto slide, how do i do that? Great video btw well deserve a sub
javaScript
i copied the code but my buttons dont work:(
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) */
}
great video thanks