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.
- You have logged in to LeadSquared.
- You have uploaded the images used for sliding and have the URL ready.
Add a Content block () 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.
Paste this code there:
<link href="http://cdn.leadsquared.com/clients/simpleslider/simpleslider.css" rel="stylesheet" /> <div id="slider"> <a class="control_next" href="#">></a> <a class="control_prev" href="#"><</a> <ul> <li><img src="http://inspirationboost.com/wp-content/uploads/2013/04/Regrets-and-Now-Quotes.jpg" /></li> <li><img src="http://inspirationboost.com/wp-content/uploads/2013/06/Promise-Quotes.jpg" /></li> <li><img src="http://www.smilesandtears.org/wp-content/uploads/2013/05/Thomas-Edison-Quotes.jpg" /></li> </ul> </div>
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.
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
<li style=”width:800px;height:600px”><img src="http://inspirationboost.com/wp-content/uploads/2013/04/Regrets-and-Now-Quotes.jpg" /></li>
Essentially set the width/height you need in the style tag. Need to do this on all the li tags.