HTML and CSS Project Tutorial: Pure CSS Image Slider 

Thanks! That’s great to hear!

Thanks for the sub!

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

​@@whitesky8013yea using js

Glad you enjoyed it!

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 )

kurisutina

You're very welcome!

Thanks, Juan! Glad to have your sub!

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

Glad it was helpful!

Glad it helped!

Thanks, Andre.

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

You are welcome

You're welcome! Glad you found it useful.

Glad you enjoyed it, Arturo!

Thank you!

Glad I could help! Thank you!

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

Thank you!

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

Thank you! 😊

yes it requires java script

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?

You're welcome! 🤣

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.

Glad to have ya!

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

Glad to have you!

You can use animation for that

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.

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

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.

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

are that problem already fixed?

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

Hello friend, did you find an answer for this?

Not yet 😅

adjust aspect ratio

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

Glad you got it!

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

Nav bar? Do you mean scroll bar?

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

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

You could probably use CSS animations, but I’ve never given it a shot. I’d probably use JS for that.

javaScript

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

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) */ }

sorry bad grammar but pls can u understand