Product

Create, publish and optimize pages with a drag&drop, pixel perfect and mobile-friendly builder

Speed up the creation process with 400+ customizable templates for landing pages, pop-ups and sections

Track microconversions in your Dashboard and analyze events and clicks with visual map

Integrate your pages with your favorite mar-tech apps and solutions to get the flow of your campaign going

Drive sales and conversions with irresistible product displays and seamless shopping experiences

Use a reliable and secure platform that smoothly handles millions of visits

Resources

Master digital marketing with the help from savvy professionals and increase your website’s conversions

Guides for beginners, set-up instructions and creation tips to get started and optimize your pages

A free online course for landing page creators! Learn the secrets of high-converting pages and become an expert

Get the answers you’re looking for – contact us

Schedule a one-on-one meeting with us and learn more about the benefits of our platform

Home Help Center Multiple image sliders

Multiple image sliders

TABLE OF CONTENT

If you want to have more than one slider (image carousel) 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

1. Log in to your Landingi account and go to the editor of your landing page.

2. 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).

3. 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.

4. Below the previously created section (slider section), drop another section widget to create a navigation section.

5. 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).

6. In the widget toolbar on the right, give them previous and next classes respectively.

7. Publish your landing page.

You can add as many slider sections and navigation sections as you want.

Add JavaScript code

1. Go to the JavaScript Code tab of your landing page. You can enter the tab right from the editor.

2. 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.

<script>   
$('.my-slider').each(function(){     
var $currentSlider = $(this);     
$(this).find('img').not(':first').hide();     
var current = $currentSlider.find('img').first();     
var $sectionUnderSlider = $currentSlider.next();     
var time = 16000;     
var buttonClicked = 0;          
$sectionUnderSlider.find('.next').click(function(){       
buttonClicked = 1;       
setTimeout(function(){         
buttonClicked = 0;       
}, time)       
current.fadeOut()       
if (current.next().length) {         
current = current.next()       
} else {         
current = $currentSlider.find('img').first();       
}       
current.fadeIn(300);     
});          
$sectionUnderSlider.find('.previous').click(function(){       
buttonClicked = 1;       
setTimeout(function(){         
buttonClicked = 0;       
}, time)       
current.fadeOut()       
if (current.prev().length) {         
current = current.prev()       
} else {         
current = $currentSlider.find('img').last();       
}       
current.fadeIn(300);     
})          
setInterval(function(){       
if (!buttonClicked) { current.fadeOut()       
if (current.next().length) {         
current = current.next()       } 
else {         
current = $currentSlider.find('img').first();       
}       
current.fadeIn(300);       
} }, time)  });    
</script>

3. Click Add to save the code.

4. Go to your published landing page and check if the sliders display correctly.

You can also check the alternative method of creating a slider (one slider per landing page).

Related articles

Read Landingi reviews on G2