- Log in to your Smartpages account and go to the Dashboard of your landing page.
- Add Name and in the Content field paste the code indicated below. Choose the Body bottom position on the Main page.
- Click on Add to save changes.
Add HTML code
- Navigate to the editor of your landing page.
- On the left side of the editor, find the HTML widget, then drag and drop it into the active area of your landing page.
- Double click to edit the widget.
- Paste the HTML code:
- The number of div elements depends on how many images your slider should have since each div should contain a link to one image file.
Every div part is responsible for one image. Repeat the part as many times, as there are images in one slider:
Edit every part, changing the link to the link of your image.
It is a good practice to add the alt parameter – it is a text that is displayed if for some reason the user’s browser does not read the image from the slider. Include a word or words here that clearly describe what the image contains. Proper use of the alt parameters has a positive impact on the positioning of the page.
- Save and close. Publish your landing page.
- Check if the slider displays correctly. If needed, go back to the editor and adjust the widget size.
TIP: The slider looks best when images have the same dimensions.
Use images uploaded to the editor
If you want to use images already uploaded to your editor in Smartpages, you can get links to them easily.
- Navigate to the editor of your landing page and open your Gallery through the Image widget.
- Right-click on your image and select Inspect.
- Developer tools will open. Copy the link to the file location.
- Go back to the HTML edition. Paste the link in its place in the code. Repeat as many times, as needed.
By default, the slider automatically switches images at low intervals of time and does not require any additional settings. However, you can use some extra parameters to change how the slider works.
All parameters should be separated by commas. There is no need to place them vertically (one below the other), however, it makes the code easier to analyze.
- pauseTime: ‘1000’ – it sets the time before the slide switches. Time is given in milliseconds, so 1000 is equivalent to 1 second;
- pauseOnHover: ‘true’ – ‘true’ stops the slide, when you hover over it, allowing you to get a glimpse of its elements. Moving the cursor outside of the slide area resumes the slideshow;
- startSlide: ‘0’ – it sets which slide will be displayed first. By default, the first slide is the first div, but you can change this order here. Remember that 0 means the first slide, so 1 is the second slide, and so on.
As a result, the code may be as follows:
After changes, publish your landing page and check if the slider displays correctly.