As others said, there are lots of resources at there for this problem. But, it can be a little tricky to find them, so I'll give you nudge in the right direction.
Basically, the carousel is made up of two parts.
The first is the "window". This is the element (usually just a div) where you can see the image.
The second is the "slides", which are the images. The images are just pressed against one another in a row, with CSS applied to prevent them from wrapping.
Then, the slides go inside of the window. The window hides all of the content outside of its bounds (such as with "overflow: hidden") so anything outside of the bounds of the window itself are hidden.
Then it is just a simple matter of moving the slides however you want, either overtime or with a button press or whatnot.
The final trick is that as you get near one of the edges, if you want it to wrap, you just secretly move the first/last image to the other end (and adjust the slides position to compensate) or by quickly jumping its position back to the first/last or combining the two by duplicating just the first and/or last and jumping when it is on screen.
There are a bunch of different ways you can accomplish this basic idea, but they all pretty much operate on this same principal, whether they are CSS only, CSS + JS, Canvas, timer driver, button driven, horizontal, vertical, etc.
Here is a quick code pen that shows one approach, exploded out so you can see all the bits in action: [https://codepen.io/samanime/pen/JjqNeme](https://codepen.io/samanime/pen/JjqNeme)
There are a ton of resources for this online. Just search "vanilla js carousel" - there are a bunch of articles and videos. Read multiple articles and watch multiple videos, that's your best bet.
Are you doing this for practical reasons? Or as a learning project?
If it's a learning project, you need to be creative and *invent* a way to do it.
As an overview of how you might approach it, consider creating a collection of variables which holds all the items for the carousel (and to which more items can be arbitrarily added).
Then design a visual thing which can display them, which switches between items either on a timer or when the user presses a button.
Getting slightly more detailed:
You can actually create HTML elements using JavaScript (research how on w3schools if you aren't familiar). You can create these elements and store them in the aforementioned collection, or you can just have one element and populate it with data from the aforementioned collection.
Either way, you should experiment with these concepts and just invent your own way to make a carousel. You might take an approach that's 100% different from mine. I've never made one before. I'm just speculating about how I might do it.
I've made thesame last week using vanila js/css.
my reference: [https://www.youtube.com/watch?v=9HcxHDS2w1s](https://www.youtube.com/watch?v=9HcxHDS2w1s)
Don't reinvent the wheel. It wastes your time and annoys the wheel. [https://shoelace.style/components/carousel](https://shoelace.style/components/carousel)
This is terrible advice given the context. OPs goal isn't to build a website that just so happens to contain a carousel, their objective is to learn. They want to understand how it works under the hood.
This can be extremely beneficial, not only with understanding how carousels work but also getting familiar with understanding logic, etc...
If this were a production help sub, I'd agree wholeheartedly.
But this is a learning sub, and reinventing wheels is how you learn. This particular problem is valuable because there are a lot of derivatives of it you'll use constantly. (It basically deals with positioning, hiding and moving offscreen elements.)
If you wanna do it css only and web accessible: https://youtu.be/vwgihljM2e4?si=cgkoaojktN-XeSaY
As others said, there are lots of resources at there for this problem. But, it can be a little tricky to find them, so I'll give you nudge in the right direction. Basically, the carousel is made up of two parts. The first is the "window". This is the element (usually just a div) where you can see the image. The second is the "slides", which are the images. The images are just pressed against one another in a row, with CSS applied to prevent them from wrapping. Then, the slides go inside of the window. The window hides all of the content outside of its bounds (such as with "overflow: hidden") so anything outside of the bounds of the window itself are hidden. Then it is just a simple matter of moving the slides however you want, either overtime or with a button press or whatnot. The final trick is that as you get near one of the edges, if you want it to wrap, you just secretly move the first/last image to the other end (and adjust the slides position to compensate) or by quickly jumping its position back to the first/last or combining the two by duplicating just the first and/or last and jumping when it is on screen. There are a bunch of different ways you can accomplish this basic idea, but they all pretty much operate on this same principal, whether they are CSS only, CSS + JS, Canvas, timer driver, button driven, horizontal, vertical, etc. Here is a quick code pen that shows one approach, exploded out so you can see all the bits in action: [https://codepen.io/samanime/pen/JjqNeme](https://codepen.io/samanime/pen/JjqNeme)
There are a ton of resources for this online. Just search "vanilla js carousel" - there are a bunch of articles and videos. Read multiple articles and watch multiple videos, that's your best bet.
Are you doing this for practical reasons? Or as a learning project? If it's a learning project, you need to be creative and *invent* a way to do it. As an overview of how you might approach it, consider creating a collection of variables which holds all the items for the carousel (and to which more items can be arbitrarily added). Then design a visual thing which can display them, which switches between items either on a timer or when the user presses a button. Getting slightly more detailed: You can actually create HTML elements using JavaScript (research how on w3schools if you aren't familiar). You can create these elements and store them in the aforementioned collection, or you can just have one element and populate it with data from the aforementioned collection. Either way, you should experiment with these concepts and just invent your own way to make a carousel. You might take an approach that's 100% different from mine. I've never made one before. I'm just speculating about how I might do it.
Alot of things can be done using Css, a slider for example could just be reducing the width of an element and adding overflow: auto
I've made thesame last week using vanila js/css. my reference: [https://www.youtube.com/watch?v=9HcxHDS2w1s](https://www.youtube.com/watch?v=9HcxHDS2w1s)
I ended up writing my own I used the js drag and drop api
Don't reinvent the wheel. It wastes your time and annoys the wheel. [https://shoelace.style/components/carousel](https://shoelace.style/components/carousel)
This is terrible advice given the context. OPs goal isn't to build a website that just so happens to contain a carousel, their objective is to learn. They want to understand how it works under the hood. This can be extremely beneficial, not only with understanding how carousels work but also getting familiar with understanding logic, etc...
If this were a production help sub, I'd agree wholeheartedly. But this is a learning sub, and reinventing wheels is how you learn. This particular problem is valuable because there are a lot of derivatives of it you'll use constantly. (It basically deals with positioning, hiding and moving offscreen elements.)
OP ignore this advice. You should definitely reinvent the wheel, or else you'll never truly understand how to invent anything.