YouTube Video SA10xHTFM9M ![rw-book-cover](https://img.youtube.com/vi/SA10xHTFM9M/maxresdefault.jpg) ## Metadata - Author: [[YouTube]] - Full Title: YouTube Video SA10xHTFM9M - Category: #articles - Document Tags: [[css]] [[generate]] [[h3]] [[responsive]] [[xref]] - Summary: YouTube Video SA10xHTFM9M - URL: https://www.youtube.com/watch?v=SA10xHTFM9M As I was designing out this brutalist inspired design, what I was expecting here for this portfolio section is some kind of carousel where people could scroll through some screenshots of the work I've done. Now, of course, generate blocks didn't have a carousel block. So, that led me down another path where I actually filmed a video of me coming up with some alternate ways we could achieve this layout. But, as luck would have it, the new alpha release of generate blocks actually introduces a carousel block just in time for us to build out this section. So, in today's video, I thought we'd explore this new carousel block while we build out this section and see if we can more closely recreate what I had designed here in Figma. If that sounds interesting to you, then stick around and let's get started. So, like I said, I had already gone through and figured out a way to build out this section without a carousel block, but now that we have it, I'd like to go ahead and slot it in. Now, I'm going to go ahead and use this page where I've already built out the next section, which you'll see in next week's video now, but I'm going to go ahead and delete this out, and we'll just add our new portfolio section right in between here. So, I'll go ahead and add a new section here. We'll type in section. We'll get that added in there. I know I want some bigger spacing in here because of this little overlapping element. So, I'm going to get rid of our section class, and we'll go with our section XL class. Now, this one does have a dark background, so I'll go ahead and give that a dark background. So now we have something more resembling what we're trying to lay out here. We'll go ahead and rename this. Right now it's just called section. We'll call it portfolio and save those changes just so we can keep up with where we're at. Obviously we have this wrapper inside it which is going to constrain everything to our website's max content width. But if we go back in here to Figma, you can see that our screenshots are actually going to span the entire width of the page while only this headline and the controls for the carousel stay at our content width. So, we need to think about how we're going to achieve that. I think for now, let's just go ahead and add the brand new carousel block to our page. And as soon as we do, you'll see we have the choice between five different presets here. We have the basic, testimonials, query, image gallery, and hero slider. This is kind of similar to how when you add a query block, you get some different choices as presets to start out with. However, on the query block, you get a start blank option, and here with the carousel, you don't. And just so you're aware, whichever one you select here, you're kind of stuck with. There's no switching back and forth between different ones. Most of them have all the same functionality except for when you get into this query one. If you just chose a basic one right now and realize later on down the road that you actually need to query stuff in, you would have to rebuild this carousel. So, it's definitely important if you think you're going to have to query information in, you want to start with this query one. Otherwise, I think we can start with our basic one here and get it to look the way we want to. So, we'll go ahead and add that in here. We can see it came with a giant image. So, let's go ahead and inspect what all got added to the page. Here we have our carousel block with carousel items inside of it. This is kind of a wrapper that holds each one of the items inside of it. So, here we have three that are listed as carousel item with a carousel items that wraps all around it. Now, at the bottom, we just have this container. What's inside of this is our carousel controls, both the left arrow and right arrow, as well as some pageionation in between it. Now, in this design, we don't need the pageionation. So, I'm going to go ahead and get rid of it. And I'm sure we'll do some future videos where we explore that pageionation in a little more detail. Now, in our design, these arrows actually go above the carousel. So, I'm just going to go ahead and grab this wrapper and move it to the top. That way, it's before all of our carousel items. Now, you'll see on this carousel block, kind of similar to the way the tabs or accordion block works, there's already some styles set on here by default. Like, this is already set to a display of flex. It has some alignment choices already selected, and it's even got some spacing at the top that was kind of separating this area from the carousel items above it. Of course, we don't want that top margin anymore. And we might go ahead and add some bottom margin just to space things off a little bit. Now, inside of here, we do need a heading. So, I'll go in here and grab my headline block. An H2 is going to work fine. We'll change this to white. And we can change this text to browse our work. Now, we want this to come before our controls. So, I'll just use my arrow here to move it up in the DOM so it comes first inside this container. And then to get our two carousel buttons to butt up next to each other, I'm just going to select both of those and wrap those in a div. Now, we can change that divs display to flex. We'll go down here to our flex layout and give it maybe 16 pixels of gap in between each one of those. So that gives us the general layout we're going for here with this top section with the browse our work headline and the buttons. But of course, we need our carousel to span the entire width of the page. So to do that, I think I'm going to go back here to my wrapper. By default, this wrapper is set to the max width of our sites content max width. I'm just going to change that to 100%. And then we can go to the container that holds our browse our work heading and those buttons. And we can give that the max width of our content max width just using that global button here. And we do need to put an auto margin on the left and right which will just center it back in the screen. And with that, our layout's a little bit closer to what we had inside of Figma. Of course, we're going to be wanting to show multiple images inside of our carousel. Right now, this is just set to show one. So, let's go back to our carousel block. And if we go into the settings panel here, you're going to find all the settings for your carousel. We'll go through these quickly just so we can get familiar with what all is here, but we won't have to make changes on everything. I do think I want to have four slides per view. That will show four of my images, and I want some space between them. We'll go ahead and go with 24 pixels. It's important to note that this space between only works with pixel units. So, you can't use any of your relative units like m or rim inside of this. It has to be pixel values. Now, we don't have multiple rows, so we can just leave that blank. We also don't have to worry about centering the slides, which is just going to start whichever active one is right in the center. That's going to leave blank space in our design. So, I'm going to go ahead and get rid of that. Auto height, we're not so worried about. And then under responsive settings, we can set this to only initialize the carousel below a specific breakpoint. In our case, we want the carousel at every breakpoint, so I'm just going to leave that alone. The next settings here have to do with our navigation. And the first one here is under our pageionation type. We got rid of our pageionation, but you do have the option to choose bullets, fraction, or a progress bar. We can choose clickable bullets or not clickable. We can choose dynamic bullets. Again, we're not using bullets in this design, so I can just leave those alone. We have the option to have an infinite loop here, which means once you scroll over to the last carousel item, it will just start again at the beginning. I think I will want that, but we're going to leave it off for now. We can come back and change that setting later. We also have the option on by default for keyboard navigation, which you're probably going to want for accessibility purposes. We can also control this carousel with our mouse wheel. And by default, we have the grab cursor icon when we hover on top of this carousel. Now, that's only going to happen on the front end, but I can show you that once we preview it there on the front end. Here we have some options for autoplay. So, if you wanted to go ahead and have these set to autoplay and start rotating immediately, you could turn that on, as well as set that delay. You can set it to pause or even disable that motion on interaction. In our case, we're not going to use autoplay, so I'll just go ahead and turn that off. Now, under the effects, we have transition effects here. The two options are slide and fade. I think slide is going to make sense in our case. And we'll just start with that default speed of 300 milliseconds, which I think will be fine, but we could always come back and adjust. Now, inside of each one of these carousel items, you can see generate blocks just went ahead and gave us an image. just so happens we could actually use an image inside of all these. So, I think that's okay. By default, it gave us three of them. I'm going to go ahead and delete those last two because I want to add classes to this. And as I duplicate it, I want to make sure I'm duplicating everything with the classes. So, we're going to call this portfolio item. Go ahead and start that class blank. Then, we'll go to our image and we'll call this portfolio image. Go ahead and create that. Start blank. And I know I want to go ahead and change this display to block. By default, these images have a little bit of bottom margin on them. And I just want to make sure to get rid of that. Now, we can go ahead and go out of our class here. We can go ahead and select the first image from our media library, which is this one here. Now, if we want to add a new carousel item, we can click on our carousel item and click this add carousel item button, which is just going to duplicate the last carousel item here. All we need to do now is just go ahead and grab the image and we can switch that out for the next image. Now we can just go to our last item and duplicate it. And again, I just need to switch out these images. So I'm just going to duplicate these over and over again until I have all six of our items. So now we can see we have six carousel items in here. And if I scroll through this, you can see everything works in the back end to be able to scroll through all these items. You'll see once I get to the first one, this the left icon is grayed out. I can't scroll any further. And once we get to the last one here, same thing happens with the right arrow. It grays out and I can't click it anymore. But if I go back to my carousel block and we turn on that infinite loop, now I'm able to just scroll through these infinitely, which I think works nice inside this layout. While we're at it, let's just go ahead and save our changes and let's go preview everything on the front end. We'll scroll down to our portfolio section here, and we'll test out the carousel. Everything seems to be working nicely. Like I said, when you hover on top of it, you have the grab icon. And I can actually click on this and grab and move all these slides around, which is a nice little feature. So, comparing what we've built so far to what we had in Figma. We can see we actually need a bigger headline here. We want to style our icons a little bit differently. And then we want our images to go all the way to the bottom of the section, but kind of fade out. You can see we have a gradient on top of it that makes these images look like they're kind of poking out of this section. So, we still got some work to do. We'll go back in here into the editor and let's start working with our icons first. I'm going to call this carousel icon and we'll go ahead and hit create. And I'm going to move all those local block styles over to my class. Again, I'm going to go ahead and grab this second one and we'll give it that same carousel icon class. And we can get rid of all those block styling since we want to control everything with the class. Now, to get this styled a little bit more like we want, I'm going to go ahead and get rid of some of these styles that came by default. They gave us a background color and a border, and they set some fixed heights on all this. I don't want any of that. So, I'm really just undoing all these changes that came by default. We need to make sure to change that border to zero since buttons by default get a border on them. Now, if we go into our additional classes here, you can see we actually have one already set up for our SVG. So, I'll go ahead and click on that so we can give it a color. That's going to be done under our text color. And I'm just going to give it our dark beige color. Here we can see we have some issues on hover. And these are also too small. So while we're on our SVG itself, I'm going to go ahead and change this to maybe 50 pixels high and 50 pixels wide just to make this a more appropriate size. Let's go into our hover settings here. We'll go into the background color and we'll make this transparent as well because I don't want to have that background show up on hover. However, I do think I want to change the color of the icons. And to do that, we're going to have to set up our own selector. You can see we have one here for our GB carousel control icon SVG. I want to use that, but I only want to control that on hover. So, I'm going to go ahead and copy this to my clipboard. We'll go back in here and create a new selector here. I'm going to do and is hover focus. And then I'll paste in that class I had from my clipboard. If we hit create and we go down to our typography, I can go ahead and change that to white. And you can see now when we hover on top of that icon, we get a white icon. Of course, I want that to have a nice little transition. So, I'm going to go back to that original SVG selector. We'll go down to our effects and we're going to change that transition to maybe 0.25 seconds. And ease is fine. Now, we just get a little bit smoother effect as we do that. Of course, our arrows looked a little bit different. So, let's see what we can get out of the default generate blocks arrows. I'll go back out of these classes here and into the settings panel. And here we have some new carousel icons. These arrows, this one here and this one here, seem to match my design pretty well. I could pull those out of Figma, but I think I'll just use what generate blocks gives us. So, I'll go ahead and grab these two icons right from our library. We'll go ahead and save those changes and check everything on the front end. And now we have the right icons. They look good on hover and everything is still working nicely with them. So let's go ahead and get rid of that bottom padding in our section. I'll go ahead and select our section. We'll go into the spacing and I'm just going to zero out that bottom spacing. That way our images rest right at the bottom of our section here. Again, let's just save changes. Refresh on the front end. And we'll scroll down here. And that looks quite a bit better and more like the design I had originally. The only other thing we need to do is make this heading bigger and do our little overlay on the bottom here that make these images look like they're fading out. So here we'll go to our heading and we'll give it our H1 class which just gives it the bigger typography settings. And then to create this little overlay effect, I think I'm going to use a pseudo element on this section. So we'll go to our section here and I want to make sure I set its position to relative. So we'll go in here to position and then select relative. Then we can go into our selectors and create a before pseudo selector. Just like we've done before, we got to make sure to give this blank content. I'm going to change the position to absolute. And I'm going to anchor this to the left, the bottom, and the right, which is just going to help us position it at the bottom of this section. Now, as far as the size, we'll go with 100% width. And then the height, I'm just going to kind of guess for now. We'll do something like 200 pixels tall. Since we can't see it, we could just add a red background here. And now you can see where our little overlay is living. Right now it's behind all of our images. So I will go here to the Zindex and we'll just give it a Z-index of five, which will bring it up in front of everything. Now we can clear out that fill. And instead of a fill, I'll just use a gradient. And just to make it easy to see, I'll make our gradient red to I don't know, maybe green, just so we can get everything positioned the way we want to. We'll go with an angle of zero, which puts our green at the top. We actually want that to be black but fully transparent. And then one the one at the bottom we're going to want to go ahead and change to our darkest color. Now right now these images are kind of being pushed up by the UI. But you can see if I click off of it we can see that fade starts at the bottom of our section and kind of overlaps our images. I think this is going to work pretty well. So we'll go ahead and save those changes. Refresh on the front end. And now our section is looking a lot more similar to what we had originally set up inside of Figma. Now, all I think is left is to check our responsive settings. So, I'll go ahead and go into the inspector here. We'll get something close to maybe our tablet breakpoint, which is around 1024. We can see our section still looks pretty good right here. Maybe four images is too many on tablet. And then once we get down to our mobile break point, I'm going to just get something real small here. We can see we probably need to stack our headline and these controls. And then we definitely don't want to have four images. and our overlay is kind of overlaying the entire image, which isn't looking great. So, let's work on those mobile settings. We'll go back in here and we'll go to our tablet version. We'll make sure we select our carousel. And if we go into the settings, we had four slides per view. Let's try changing that to three and just saving those settings. We'll get this back to something like our tablet breakpoint and refresh it. And now, I think three images works pretty well on tablet. So, I think we can leave that alone there. Now, we just need to worry about our mobile. So, we'll go back in here, switch to our mobile breakpoint, and I think we want to do something like 1.5 images. We can actually use decimals here, which will allow us to see 1 and a half images instead of just one. That way, people can see that something's kind of showing off screen. I'll go ahead and refresh that since it wasn't previewing in the editor very well. And now we can see a full image here plus a half an image to the side of it. I like that look for this just because it tells people that there's still something to scroll and see next to it. Now, we do need to worry about when this gets too tight and these are kind of creating some overflow issues. So, let's go back to our container that houses all that. And we'll just go in here to our flex controls and let's change this to column instead of row, which will put these on top of each other. We can add maybe 24 pixels of gap. And then we'll just make sure that we align everything to the left, which will put these arrows over on the left hand side. Again, I'll go ahead and save those changes and refresh. We'll scroll down here. And now we have our arrows over here. They actually might look better on the right, so I might move those. But I think the size of the images works pretty well with this 1.5 image showing. So the last thing we'll do is we'll just go ahead and grab these arrows and we'll make sure that they are positioned over to the right. We can go back to this container. We'll change this align to the align end which will allow our arrows to be pushed over to the right hand side. Then we can save it one more time. Refresh on the front end and scroll down. And now we have our headline to the left with our arrows to the right, which I think works well inside of this design. A carousel block is something I know a lot of people have been waiting for to be added inside generate block. So now we can all celebrate that it's here. Of course, I haven't had much time with it yet, so I haven't really been able to explore everything we can do with it yet, but I'm sure I'll add some additional content on this YouTube channel as I get a little bit more time to play with the different ideas. For now, I knew that we had a carousel inside of this Brutalist series. So, I wanted to go ahead and hop in here and see if we could achieve that look using this brand new block. And it seems like it's pretty easy to do. Hopefully, you enjoyed today's video. If you did, I would really appreciate a thumbs up. And if you want to make sure to see the future content I create on the carousel block, go ahead and hit subscribe and we'll see you, YouTube Video SA10xHTFM9M, YouTube, 01kacpy0s81gvtmz1253kx0aeg.