Add a responsive slider content in Landing pages

You can now add a responsive slider with images or text in LeadSquared responsive landing pages.
Note that you have hosted the images and have the URL of it. Please contact support team if you need any assistance with the image URLs.

Prerequisites:

• You have logged in to LeadSquared.
• You have uploaded the images used for slider and have the URL ready.
• All the images used for slider are in same dimensions.
• You are using Responsive landing page editor to perform this operation.

Procedure:

• Choose Responsive landing page template/blank template.

• Add a HTML block on the top of the landing page where you need the slider.

• Double click the block to open the editor, click on  Source-in-landing-pages 2 to go to the HTML source view of the html block.

Download below attached code and paste it there.

• Customize the code by replacing sample image URLs with your image URLs.

• Add your desired captions at the sample caption text. (You can remove it, if not required)

• Click ‘Save’ after all the changes are done.

Below is the illustration of code:

Responsive slider

Click here to download the code.

The image indicators should be added in landing page Style Editor.
• Click on ‘styleeditorStyle Editor’ and select ‘StyleSheet 2’
• Add these two codes at the bottom of the existing code.

• Use below code to add color codes for indicators:
.carousel-indicators .active { background-color : red;}.carousel-indicators li { background-color : green; } 

• Use below code to add position of indicators:
.carousel { position:relative;}.carousel-indicators { bottom: -40px; }

• Click ‘Save’ and publish the landing page.

Note:
1. First item’s Class tag and List (li) tag should be marked Active
Eg:- ” {class=”item active”} and {li class=”active”} “;
2. The Width of the image is set as 100% in the above code and it can be changed based on your requirement
Eg: max-width:640px
3. You can also add captions to the images by replacing text in ‘Add your desired caption’ in the attached code.

Was this Helpful?

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments