A carousel refers to a rotating or sliding display of various multimedia types within a confined space on a webpage. It is a popular component used to showcase multiple types of visual content in an interactive and engaging manner.
The carousel typically consists of a series of multimedia panels or slides that are displayed one at a time. The slides can be set to automatically transition or use of navigation controls, such as arrows or indicators, allow users to manually scroll through the content.
To customize your carousel or slideshow
A slideshow or carousel can be customized by its content, appearance, and action. This can be done in the left control panel when the slideshow section is selected.
Content (Old and New Version)
This is where you can add media or slides in your slideshow, and customize the slideshow section.
Slideshow Section
The Slideshow section can be customized using the following options:
Full width - adjusts the slideshow to occupy the whole width of the site
Height - adjust the slideshow to your preferred height
Hide section - section is not visible to visitors and will not appear in the page menu
Margin - check this box to adjust the space around the slideshow
Padding - check this box to adjust the space around the slideshow content
CSS Classes - add custom CSS Classes to apply in your slideshow section
Slide customization
Each Slide can be customized using the Edit slide button. The following can be customized in each slide:
Choose new file - select media to replace the current one from the Media Library.
Slide Type - only available for images and not for videos
Contain - (default option) the media keeps its aspect ratio, but is resized to fit within the given dimension
Cover - the media keeps its aspect ratio and fills the given dimension. The image will be clipped to fit
Custom - you can set the dimension for the slide
Slide Image Dimensions - (click the dropdown to switch from px to em)
Width - set a custom slide width
Height - set a custom slide height
Caption Controls - will only be available if Caption Visibility is set to "Show"
Caption Visibility - controls if the caption is visible or hidden in the slideshow
Caption Position - option to show the caption area in the left, right, or bottom of the slide
Caption Title - the slide title
Description - the slide description
Text alignment - text alignment options are left, center, and right
Text position - text position options are top, middle, and bottom
Alt text - will be displayed in place of the media if it cannot be loaded
Appearance (New Version)
The carousel or slideshow appearance can be customized in the Appearance tab.
Slide Type - determines how current and surrounding slides are displayed
Single - only the current slide is visible
Center - current slide is shown in the center, while the preceeding and following slides are shown in silhouette on each side.
Slideshow Nav - these is how the navigation will be seen in the bottom of the carousel or slideshow.
Thumbnails - shows each thumbnail in the carousel
Dots - slides are shown as dots. The selected slide's dot is larger than the rest
Hide - option to hide the carousel or slideshow navigation in the bottom
Arrow Colors - change the color of the slide navigation arrows to Light or Dark
Arrow Style - change the style of the arrows in the sides of the carousel or slideshow. Choose from one of the following:
Arrow - (default) arrows pointing to the left and right from each side
Chevron - the arrow displays as < or >
Circular - the arrow displays inside a circle
Hide - option to hide the carousel or slideshow side arrows
Section Background - add color to the carousel or slideshow section's background
Action (New Version)
The animation or action of the carousel or slideshow can be customized in the Action tab.
Enable autoplay - allows the carousel or slideshow to automatically switch slides until the last slide
Loop animation - allows to manually switch slides on loop. Use with "Enable autoplay" to allow slides to display on a loop
Show slide in full screen when clicked - will show an action icon that indicates that the slide will open in full screen when clicked