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