Carousel

Add the carousel element to your page by clicking in the plus in the empty block, and then under media, you will find a carousel element. Click, Hold, and Drag, and drop it onto the page. With the first instance, a few things to observe. You have content that is structured within columns, the blue boxes. Navigation arrows, one on the left, the one on the right, through which you can cycle through the different columns. And then you have dot navigation at the bottom. The amount And the set of dots indicates how many cards or columns you have and which one is focused. So if I click on this one, it will scroll and then go back to the beginning. The options for the element is accessed in the top right and you will find it all the way to the left. In most cases, you will want autoplay, but while working, it's a good idea to keep this switched off. Currently, we have three columns, and you can increase it to four columns. And now you see the dot navigation navigation disappears as well as the arrows because there's no navigation. This can go up to six.

And once you go below the amount of columns, you will get the navigation, which is what you are looking for. This can go as low as one, which is usually preferred on mobile devices. Spacing is the space added between the columns. More control over navigation, you can choose what arrows you want to display. As well as the spacing between the content and the arrows. And then for dot navigation, you can set it to none or choose any of the other options available. The colors This section is important because here you can set your colors for your arrows as well as for your dots. In regards to content, the carousel is essentially columns with general content that you can bring in. By default, it comes in with an image and then a text and a button, and you can bring in any element from the elements panel to build out yours. Just remember, this is applied on a column-by-column basis. If you decide that you want a specific structure applied to all of your columns, style out one and then duplicate it by going to the Column settings, and then go to the Rest and delete those.

We I will delete these three. It's also a good idea before you copy it to go and check responsive view to make sure it also looks good on tablet and mobile devices, and then only start copying so you already lock in those responsiveness. Another important feature at the Column section is that you can reorder the columns. Let's make a few changes here. I'll just change the color of the text for these two so that you can have an idea of how to reorder. Let's say I wanted this card to be after this one. Go to the Column settings and the arrows in the Options toolbar will allow you to move them to the right or to the left. Let's go to this one here and say we want to bring it all the way in front of the yellow one. I'll click. And I'll click. For the rest of the options, you've seen how to duplicate and delete it. And then under settings, you also have the height to auto and you can align the content as you would do in a normal column. Note Note that each of these columns also have the option for normal links like URLs, blogs, and download files, and of course, popups, which makes it really a great and powerful element.

From here, you have to go into your tablet and have a look. And by default, it is set to two column display, which is very convenient for a tablet. What we will do here is make a little bit of changes to our arrow. I'll go to the carousel settings and then columns and arrow I will decrease it to move it to the side. The problem that we have is that we don't have enough space. And here I will go to the padding on the right and add padding, round 24, and I'll do the same for the left. Now, the arrows are nicely visible. The same is going to happen when we go to mobile. For mobile, you are restricted to only one column. Again, you're going to have your arrow spacing, and I will increase the padding. This time, I'll just type in around 45 pixels on the left and 45 pixels on the right. It makes it much easier to navigate.