If you want to have more than one slider on your landing page, use the following instructions to implement it. With this method, you will be able to add a single slider to your landing page too.
Add slider sections
- Log in to your Smartpages account and go to the editor of your landing page.
- Create a new section for your slider – on the left side of the editor, find the Section widget (1), then drag and drop it into the active area of your landing page.
Add a class to your new section. In the widget toolbar on the right, go to the Other section at the very bottom and type my-slider in Classes (2).
- Drag new Image widgets and add images. Place one image above the other.
Remember that the images in the slider:
- should be the same size;
- their size should reflect the size of the slider;
- they will display in the slider in the order they were added to the editor;
- you can add as many photos as you want.
- Below the previously created section (slider section), drop another section widget to create a navigation section. `
- Drag two Icon widgets there: one for switching slides left and the other for switching slides right. Drop them in a chosen place, click on them, select Change, and choose your icons (preferably arrows).
- In the widget toolbar on the right, give them previous and next classes respectively.
- Publish your landing page.
You can add as many slider sections and navigation sections as you want.
Add JavaScript code
- Go to the JavaScript Code tab of your landing page. You can enter the tab right from the editor.
- Create a new script. Name it and paste the code indicated below in the Content field. Choose the Body bottom position on the Main page.
- Click Add to save the code.
- Go to your published landing page and check if sliders display correctly.
You can also check the alternative method of creating a slider (one slider per landing page).
