Add the Carousel element on your page
Step 1: In GemPages Dashboard, select your page and enter the Editor via the “Edit” button.
Step 2: Search for the Carousel element to drag & drop it onto your preferred position on the page. You can choose between 2 layouts: 1 column and 4 columns.
Step 3: Feel free to drop the elements you wish into the Carousel. This can range from Images and Hero Banners to Product Modules and more.
To access the configuration options for the Carousel, simply click on it. The left sidebar will then reveal the Settings and Advanced tabs, allowing you to customize its behavior and appearance.
Configure the Settings tab
Item Management
The number of slides in the Carousel element depends on the selected layout, which can be either one or four by default. However, you have the flexibility to add or remove slides as required.
To add additional slides: Simply click on the “Add more” option.
To duplicate a slide: Hover over the desired slide and click on the duplicate icon.
To remove a slide: Hover over the specific slide and click on the trash icon.
Carousel settings
Item Number: Modify the number of slides displayed on the carousel.
Infinity Loop: Activate this switch to allow the carousel to repeat from the beginning after reaching the final slide.
Autoplay: Activate this switch to enable the automatic advancement of slides. For optimal functionality, combine Autoplay with the Loop feature. With both functions enabled, slides will automatically progress and loop back to the first slide.
Pause On Hover: Select this option if you want the carousel to pause when hovered over.
Timeout(s): Adjust the slider to determine the duration of the pause after hovering.
Dots: Choose whether to display or hide the dot indicators.
Next & Previous Arrows: Activate this option to show arrows for navigating to the next/previous slides. You can also specify the arrow’s position within or outside the carousel. Additionally, you have the option to select an arrow from our icon library or upload your own using SVG code.
Size
Full-width: Activate this option to expand the carousel to cover the entire width of the page. Alternatively, you can enter a specific width value in the provided box to set your preferred width.
Fit height to content: Activate this option to automatically adjust the height of the carousel based on the content inside. If you prefer to set a specific height value, you can deactivate this option and enter your desired height value.
Spacing
Input your preferred value in pixels for the spacing between slides into the box.
Configure the Advanced Tab
For more advanced customization, please navigate to the Advanced tab and follow the instructions in this article.
How to create a Slideshow with Carousel element?
The carousel element is most commonly used to craft a slideshow on your webpage. By blending the Hero Banner with the Carousel element, you can easily design an impressive slideshow that captures customer attention. To learn how to do this, check out the instructional video below:
And there you have it! If you need any further assistance along the way, our GemPages Support Team is always here for you!