If you want to have more than one slider on particular landing page, use the following instructions to implement it. Of course, with this method you will be able to add a single slider to your LP too :) 

TIP:💡
Don't like this method? You can also check the alternative method of creating a slider (one slider per landing page).

How this slider works?

Running this slider on a landing page requires adding a short script in the "javascript codes" tab and the appropriate classes for some elements when editing the landing page.

How to add this type of slider (or sliders) to your landing page?

  1. Create a separate section (i. e. section_slider1) and give it "my slider" class. Then add photos from the gallery or disk that you want to have in the slider.

Remember that the photos 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.

2. Below the previously created section (section_sider1), create another section, e.g. section_sider2.

Add  two types of arrows (icons) there - one for switching slides left and the other- right. Give them the "next" and "previous" classes respectively.

3. Save and publish the changes, and then leave the editor.

4. Go to the main view in the Landingi application, and then enter the Dashboard -> Javascript codes of the selected landing.

5. Add a new js code in the Body bottom section and save the changes:

<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 = 6000;
    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) //auto change timer
  });
 
</script>

That's all!

If you encounter any problems - let us know via chat or at support@landingi.com


Did this answer your question?