loading..
< View all articles in Landing Pages.

How to add Slider Content in Landing pages

You can add a slider with images or text in LeadSquared landing pages.

Note that you have to upload the images into LeadSquared and get the URL of it. Please contact us if you need any assistance with the image URLs.

Prerequisites:

  •  You have logged in to LeadSquared.
  • You have uploaded the images used for sliding and have the URL ready.

Procedure

Add a Content block (content) on the top of the landing page where you need the slider.
Double click the block to open the editor, click “Edit HTML” to go to the HTML source view of the Content block.

slider content 1

Paste this code there:

> <

 

 

    • <

 

 

Each <li> tag is a slide. You can remove or add new slides by adding the whole <li><img…</li>.   In this example we added images in slides; it could actually be text or anything!   The source(src) of image (img) should point to where your images are there. We just placed some of our images as examples, so you need to replace them with your images.

In Step 4 “Page Settings” of landing page, “Embed JavaScript” option, add this JavaScript there under “End of Body” section

jscript

<script src="https://leadsquared-website.s3.amazonaws.com/clients/simpleslider/slider.js"></script>

You can then publish the landing page and see if it works.

Note that the slider in our example has images with width 640px by 480px.  If your images are of different dimensions, then you need to change the <li> tags above like this

Essentially set the width/height you need in the style tag.  Need to do this on all the li tags.