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
- 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)
There are two types of sneak peeks:
+0.5(partial last slide)-
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.
-
Center Align(equal left/right preview)- 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 (such as arrow)
- Icon size
- Icon color
- Width
- Height
- Padding
- Background color
- Border
- Corner
- Gap to each side
- Only show when hovering
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. You can set the full-width carousel by following these steps:
- Set
Widthto 100% orFull Width - Then go to Settings > Align and select Center or Stretch
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.
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.
Thank you for your comments