Overview
In this guide, you will learn everything you need to know about the carousel general settings and how they work. These settings allow you to set up and adjust some important features which affect how your carousel works. This includes things like how many slides to show per device, spacing around the carousel and slides, slide width, vertical alignment, and cut off mode. The general settings can all be found in with the other carousel settings in Row settings>Column settings>Carousel tab in the General Settings toggle. You should also check out the general settings demo to get some inspiration, or download our free layouts on the demo site to give you a quick start!
View Live Demo
View Settings List
Make This Column A Carousel
This is the main setting that needs to be turned on to enable the carousel. This setting is found in the Column settings under a clever new tab that we created called “Carousel.” When this setting is turned on, all the other carousel settings appear as well, and any slide that you have or add to the column now become a carousel.
Number Of Slides Per Device
This dropdown setting allows you to select a number which sets how many carousel columns are shown at a time for each device size. You can change this number for each device by opening up the responsive settings and choosing a number Desktop, Tablet, and Phone.
We have made this easy for you by already setting a default number for each device, even if you do not adjust anything. So by default, there will be 3 slides on Desktop, 2 slides on Tablet, and 1 slide on Phone. We just think this works best, but obviously you can choose to change those.
Number Of Rows (Advanced)
This is a very clever feature that allows you to select a number which sets how many carousel rows are used. This is set to 1 by default, which is what you would use most of the time. Only change this if you properly understand how it works by following the instructions in our written guide.
Carousel Container Spacing
This setting allows you to adjust the spacing around the carousel container. This is the spacing around the top, bottom, left, and right of the container that holds the slides. It is especially helpful if you want to adjust how close the navigation arrows and navigation dots are to the top or bottom of the carousel. This is set to 10px on all sides by default.
Use Custom Slide Width
Enable this setting to set a custom width for each of the carousel slide. Note that this setting overrides the number of slides shown per device. Also note that this setting will be disabled if the width of the slide is too wide for the space or device size. When this setting is turned on, another setting appears below to set the custom width.
Slide Width
Once the custom slide width is enabled, this input area allows you to set the width in pixel units for each of the carousel slides.
Cut Off Mode
This feature allows the slides to be partially cut off on each side based on the slide width. This is a trendy feature because it looks great and gives users the indication that there are more slides to the left and right.
Vertical Align
This setting allows you to customize the vertical alignment of all the slides. This is great if some slides are not the same height, or if you just prefer a particular alignment for your needs. The dropdown selector includes the following options:
- Top
- Center
- Bottom
Top
When the Top option is selected, all the slides will be aligned vertically to the top, even if the individual slides are different heights.
Center
When the Center option is selected, all the slides will be aligned vertically to the center, even if the individual slides are different heights.
Bottom
When the Bottom option is selected, all the slides will be aligned vertically to the bottom, even if the individual slidese are different heights.