Carousel Element

About the Carousel Element

The Carousel element refers to a specific feature or widget that allows users to create and display a carousel of products, images, or promotional content on their website. Here are several key features & benefits of the Carousel element:

• Product Showcase: E-commerce carousels often showcase products from a store’s inventory. Each slide can display a different product with its title, image, price, and possibly a brief description.
• Promotional Banners: The Carousel element can also display promotional banners or advertisements for sales, discounts, or new arrivals.
• Customizable Layout: Users can usually customize the layout of the carousel, adjusting aspects like the number of visible items per slide, the transition effects between slides, and the overall styling to match their brand’s aesthetic.
• Navigation Controls: This typically includes navigation controls such as arrows or dots to allow users to navigate through the carousel slides manually.
• Responsive Design: Like other elements in modern web design, carousel elements in e-commerce page builders are designed to be responsive, ensuring they display correctly on various devices and screen sizes.

How to add the Carousel Element in GemPages V7?

Step 1: In the GemPages Dashboard, select the page where you want to add the Carousel element. 

Step 2: Search for the Carousel Element, select the desired type, and drag it to your preferred position on the page.

Step 3: Drop the elements you wish into the Carousel. This can range from Images and Hero Banners to Product Modules and more.

To access the Carousel’s settings, simply click on the element. The left sidebar will then reveal the Settings and Advanced tabs, allowing you to customize its behavior and appearance.

Configure the Settings Tab

Items per slide

If you want to show more than 5 items per slide, click on the setting icon to enter an exact number as you prefer.

Display

• Max Items: Display up to 12 items
• Spacing: Adjust the distance between items
• Sneak Peek: Reveal partial next/prev slide (only for 2+ column layouts)

Note: The Sneak Peek option is available only for layouts with two columns or more.

Item Management

You can easily add or remove slides and rearrange their order as you like.

To add more slides, just click the “Add more” option. When you hover over a slide, you’ll see three choices: edit the slide name, duplicate the slide, or delete it.

Gap

You can change the spacing between each item in your carousel. The default spacing is 16px.

Item style

Navigation 

In this section, you can customize different aspects of the carousel’s navigation, including:

• Position
• Icon (such as arrow)
• Icon size
• Icon color
• Button size
• Background 
• Border
• Corner
• Gap to edge
• Show on hover

Dots

In this section, you can choose whether to display the Dots button outside or above the item slide.

You can edit the Dot button size and customize two color states for the Dot button:

• Inactive color: Change the color of the dots for hidden slides.
• Active color: Modify the dot color for the currently visible slide.

Also, it allows you to set the distance from the Next/Previous button to slide items.

Interaction

Customize the interaction in the carousel element:

• Autoplay: Activate this switch to advance slides automatically. For optimal functionality, combine Autoplay with the Loop feature. With both functions enabled, slides will automatically progress and loop back to the first slide.
• Delay: Set duration (in ms) before switching slides.
• Pause on hover: Stop autoplay when users hover over the carousel.
• Slide direction: Choose left or right slide movement.
• Infinity Loop: Activate this switch to allow the carousel to repeat from the beginning after reaching the final slide. 
• Drag/swipe: Enable this option to allow customers to slide to the next image using their mouse. 
• Slide speed: Edit the speed for the slides in the carousel
• Animation: Choose the animation effect, such as Ease In, Ease Out, and Ease In & Out. You can preview the animation effect when applying it in the carousel element.

Size 

Customize the width and height of the carousel element according to your preference. You can set the full-width carousel by following these steps:

• Set Width to 100% or Full Width
• Then go to Settings > Align and select Center or Stretch

Make sure the carousel container section or row is also set to full width in your layout structure.

Background

Choose the most suitable background color for your carousel. Also, you can use an image as the carousel’s background.

This setting affects the entire Carousel background (not each slide).

Shape 

You can edit the carousel’s border, corner, and shadow effect. 

Align

In this section, you can choose from three options: left-aligned, centered, and right-aligned.

Configure the Advanced Tab

For more advanced customization, please navigate to the Advanced tab and follow the instructions in this article.

FAQs

1. Why is my carousel not displaying full width?

• Check that the width is set to 100% Settings > Size.
• Ensure the carousel is placed in a section or row that also spans full width.
• Set Align = Center or Stretch in Settings > Align.
• Avoid placing the carousel inside narrow columns or nested sections.

2. Why doesn’t my carousel autoplay?

• Go to Settings > Interaction and make sure Autoplay is toggled on.
• To keep it looping, also enable Infinity Loop.

3. Can I display products dynamically in the Carousel?

• The Carousel doesn’t auto-pull products like the Product List element.
• You need to manually drag product modules into the Carousel for custom control.

4. Why do images look cut off or misaligned?

• Check the Image ratio, Padding, or Slide width settings.
• Use Fit Image instead of Fill Image if maintaining aspect ratio is a priority.