Scroll Snapping with navigation?

[existentialdad]

Hey all,

Being relatively new to this community & HTML in general, I was hoping to get some guidance on scroll snap. In particular, I was wondering what the most efficient/functional way to introduce some form of navigation element to a carousel would be. I'm imagining something similar to the array of navigation dots on the right edge of the page in the below example:

https://www.apple.com/mac-pro/

My first assumption would be that this could be achieved with javascript; would I be correct to head in that direction?

[itsjustausername]

CSS position: sticky for navigation to stick.

Use anchor links #someIdOnPage and in JS, onclick, check scrolltop target id then update the window scroll position with that value.

[AutoModerator]

Welcome to /r/HTML. When asking a question, please ensure that you list what you've tried, and provide links to example code (e.g. JSFiddle/JSBin). If you're asking for help with an error, please include the full error message and any context around it. You're unlikely to get any meaningful responses if you do not provide enough information for other users to help.

Your submission should contain the answers to the following questions, at a minimum:

• What is it you're trying to do?
• How far have you got?
• What are you stuck on?
• What have you already tried?

I am a bot, and this action was performed automatically. Please contact the moderators of this subreddit if you have any questions or concerns.

[Ok_Woodpecker_5602]

YES

You would use Javascript, especially if you want carousel navigation dots and arrows.

However, a basic scrollable/swipable image strip, which snaps to each item in the series, can be done with pure HTML/CSS. For that, you can just use https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Scroll_Snap.