Create a stunning Slider with module Carousel of GemPages

The core idea of Carousel allows you to show two or more images in sequence and these images can link to internal or external web links you would like.

Your shoppers that come across your carousel section can scroll through the slides by swiping with their fingers if using touch-screen devices such as Mobile or Tablet, whilst Desktop - Laptop users they can navigate through it by clicking on the arrows on the sides.

In this article, we will introduce steps to create a Slider section by using Carousel.

Step 1: Building the framework for the Carousel section.

Drag and drop module Carousel from the left sidebar to your page.

Duplicate to add more Slide or Remove the existing slide(s) as your expectation.

To avoid overwhelming your shoppers, please don't create a Carousel with too many slides

Adjust the settings of module Carousel on the left sidebar:
- Set number of Column as 1
- Toggle ON/OFF Dots and Next/Prev Buttons
- Adjust Nav Speed - select how long each slide displays before it automatically advances to the next one.
- Toggle ON/OFF Loop
- Toggle ON/OFF Autoplay

Step 2: Add Image Background images for each slide

Drag and drop the Hero Banner to each slide of the Carousel

Upload your own image

Click on the image on the left sidebar to upload images from your device, or click on Browse Gallery to re-use images saved on Gallery.

Step 3: Adding Heading/Text block and Button above the images.

Create your own content, and change their appearance by using the Settings on the left sidebar.

Tip: To adjust the position of the Text section vertically, you can adjust the padding-top and padding-bottom of Hero Banner.
Default padding-top & padding-bottom of a hero banner are 200px & 200px. When you decrease padding-top to 100px, and increase padding-bottom to 300px, the text - button section will be pulled up

Before

After:

Step 4: Associate a link to the Heading, Text Block, or Button so that your shoppers can click to explore further information

Click on Pick a link button on the left sidebar, then add an external link or pick an internal link from the link picker.

Repeat step 2, step 3, and step 4 for other images of the Carousel.

Though the Carousel section is visually appealing and interactive, there are many recommendations that we should exclude this section from the e-store for loading speed optimization purposes.

In case you want to keep this section, here are some tips to make your page load faster:

Keeping the size of images as small as possible since the relationship between the size of images and loading speed is a trade-off.
Using JPEG format also will speed up your image.

Related Articles