Carousel Component

[00:00:00]
>> All right, so we've got all of this trending movies data that we're not using at the moment, we're only displaying one movie, and we'd like to show a whole bunch of trending movies beneath it in that carousel that we saw earlier. So to do this, because we're going to be repeating this a couple of times, we're going to add a carousel component that we can reuse throughout our application.

[00:00:22]
So let's go over to the lib folder. We'll create a new directory components. This is where we'll put components that are gonna be repeated multiple times in the app and create Carousel.svelte. Okay, so we're gonna create a script element, and we're gonna export a movies prop. First, we're gonna add the lang=ts attribute as always.

[00:00:50]
And our movies prop is gonna be an array of MovieListResult objects. If we look at that definition, you can see all of the things that exist on that object. Including usefully for our purposes, the poster path, which is that image there, and the ID which is gonna enable us to link to an individual movie page.

[00:01:17]
We'll begin by creating a div with a class of carousel. And then inside there we're just going to render a whole bunch of poster images. So for each of our movies in the array, each movies as movie, we're gonna create a link element, That points to /movie/movie.id. And inside there we're gonna render the movie's poster.

[00:02:06]
Like with our hero component, we're gonna use the media helper. We're gonna pass in the movie.poster_path that we saw with a width of 500. Let's see how that looks. Okay, so we're gonna need to use the carousel component in our page. So let's open that component. Okay, so we've started building our carousel component.

[00:02:34]
Let's add it to our page. Start typing carousel, auto-import that. And the movies that we're gonna pass are the data.trending.results. You can see that it's now rendering that entire list. Obviously it's a little bit chunky, this isn't quite what we want. So let's go into Carousel.svelte and add some CSS.

[00:03:19]
First thing we're going to do as so often is we're going to turn this into a display flex element. I find that I use display flex more than pretty much any other display property these days. And we're gonna give this a maximum height of for now let's just say 10rem and you can see that the footer is now appeared above the carousel because we need to shrink the images down as well.

[00:03:46]
So we're gonna say that the A elements inside there have a maximum height of 100% and the same for the images inside the anchor elements. It's starting to look a little bit more like a carousel now. Let's add a gap, Space them out a little bit. And we wanna make the carousel scrollable without making the entire page scroll along with it.

[00:04:16]
And that's easy enough to do with the overflow-x scroll CSS property. But you'll notice on the original, when we scroll we ended up with the posters perfectly lined up with the one below. And that's because we're using something called scroll snapping. So, let's add some scroll snaps to carousel. The property is called scroll_snap_type.

[00:04:50]
And the value is mandatory. In other words, we always insist that the image line up with the left hand edge. But we need to add some padding before this will behave the way we want. And we can, Use the, Side value that we declared in our global CSS.

[00:05:21]
But we need to add it both to the scroll padding and the element padding. So scroll-padding-left is gonna be var --padding. And then the padding on the carousel is gonna have that on both sides. All right, you can see it's now slightly offset. One other thing that we'll need to add to get rid of the ugly scroll bar on some platforms is this pseudo selector carousel : : -webkit-scrollbar and that's gonna get a display of none.

[00:06:23]
Now this is all starting to take shape, but this big image is too big. We want it to be constrained to that column width that we specified for the navigation and for that header element that we have on the page. Unfortunately, we can't just use the column class on this carousel because then we wouldn't be able to scroll the elements to the left of that view that would get cut off by the column.

[00:06:54]
So instead, we're gonna need to use a little bit of maths in our CSS. Bear with me for a minute while we type this out. The padding on the side of the carousel is gonna be the maximum of that side custom property. And the calculated value of, [ BLANK_AUDIO] The --side property.

[00:07:21]
Plus the full width of the page 100 vw minus the column width. I'm gonna group those values and then divide the whole thing by two. And if we've set that up correctly, that will now max out when we make the page bigger. So you can see now that it's getting a little extra padding there on the side.

[00:07:52]
So that we can see this on the screen when it's zoomed in like this, I'm actually gonna go into my styles.css. And change that column width to say 60 and now, when we drag this page out we'll see that that happened much sooner. We need to do the same thing for the hero image now.

[00:08:10]
So open the Hero.svelte component and we'll set a max width on that "a" element. In fact let's just add the column class. And that is now similarly constrained