All Collections
Design your site
General Design
Customize your carousel or slideshow
Customize your carousel or slideshow
Elaine Bondoc avatar
Written by Elaine Bondoc
Updated over a week ago

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:

  1. Full width - adjusts the slideshow to occupy the whole width of the site

  2. Height - adjust the slideshow to your preferred height

  3. Hide section - section is not visible to visitors and will not appear in the page menu

  4. Margin - check this box to adjust the space around the slideshow

  5. Padding - check this box to adjust the space around the slideshow content

  6. 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:

  1. Choose new file - select media to replace the current one from the Media Library.

  2. Slide Type - only available for images and not for videos

    1. Contain - (default option) the media keeps its aspect ratio, but is resized to fit within the given dimension

    2. Cover - the media keeps its aspect ratio and fills the given dimension. The image will be clipped to fit

    3. Custom - you can set the dimension for the slide

      1. Slide Image Dimensions - (click the dropdown to switch from px to em)

        1. Width - set a custom slide width

        2. Height - set a custom slide height

  3. Caption Controls - will only be available if Caption Visibility is set to "Show"

    1. Caption Visibility - controls if the caption is visible or hidden in the slideshow

    2. Caption Position - option to show the caption area in the left, right, or bottom of the slide

    3. Caption Title - the slide title

    4. Description - the slide description

    5. Text alignment - text alignment options are left, center, and right

    6. Text position - text position options are top, middle, and bottom

  4. 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.

  1. Slide Type - determines how current and surrounding slides are displayed

    1. Single - only the current slide is visible

    2. Center - current slide is shown in the center, while the preceeding and following slides are shown in silhouette on each side.

  2. Slideshow Nav - these is how the navigation will be seen in the bottom of the carousel or slideshow.

    1. Thumbnails - shows each thumbnail in the carousel

    2. Dots - slides are shown as dots. The selected slide's dot is larger than the rest

    3. Hide - option to hide the carousel or slideshow navigation in the bottom

  3. Arrow Colors - change the color of the slide navigation arrows to Light or Dark

  4. Arrow Style - change the style of the arrows in the sides of the carousel or slideshow. Choose from one of the following:

    1. Arrow - (default) arrows pointing to the left and right from each side

    2. Chevron - the arrow displays as < or >

    3. Circular - the arrow displays inside a circle

    4. Hide - option to hide the carousel or slideshow side arrows

  5. 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.

  1. Enable autoplay - allows the carousel or slideshow to automatically switch slides until the last slide

  2. Loop animation - allows to manually switch slides on loop. Use with "Enable autoplay" to allow slides to display on a loop

  3. Show slide in full screen when clicked - will show an action icon that indicates that the slide will open in full screen when clicked

Did this answer your question?