Carousel Element

This article provides a guide on using the new Carousel Element in GemPages V7 to capture customer attention effectively.

Note: For optimal functionality, please upgrade to version 7 of GemPages.

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-commerc e 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.

add-element-1

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

Display

In this section, you can select up to 12 items to display in the carousel element. Additionally, you can customize the spacing between items and adjust the sneak peek option.

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

There are two types of sneak peeks:

The +0.5 format(with one last slide retracted)
- If you select a one-slide layout and set the Sneak Peek to +0.5, the design area will appear as 1.5 columns.
- For a two-slide layout with Sneak Peek +0.5, the design area will show as 2.5 columns.
The Center align format (with left and right slides retracted):
- This layout always features two retracted slides on the left and right.
- For a three-slide layout or more, the first and last slides will be retracted, while the middle slides will be centered and evenly spaced.
- If fewer than three slides are selected, additional slides must be added to reach a total of three slides.

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, copy the slide, or delete it.

item-management

Navigation

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

Navigation position
Icon
Icon size
Icon color
Width
Height
Padding
Background color
Border
Corner
Gap to each side
Only show when hover

Dots

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

You can also 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.

In addition, you are allowed to set the distance from the Next/previous button to slide items.

carousel-dots Interaction

Customize the interaction in the carousel element:

Infinity Loop: Activate this switch to allow the carousel to repeat from the beginning after reaching the final slide.
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.
Drag to scroll: 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 & 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.

Shape

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

Background

Choose the most suitable background color for your carousel.

Align

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

carousel-settings

Configure the Advanced Tab

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

And there you have it!

What did you think about this content?

Your comments

Irrelevant: Unexpected or off-topic information.

Inaccurate: The information doesn’t match the product.

Needs small fixes: There are typos or broken links.

I have suggestions: I’d like to suggest improvements for this page.

Email*

Invalid email address.

Something went wrong. Please try again later.

By submitting your email address and comments, you consent to the collection and use of your information as outlined in our Privacy Policy and agree to our Terms of Service.