Multiple sliders

04.02.2019

If you want to have more than one slider on a 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.

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_slider1), create another section, e.g. section_slider2.

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 chosen landing page. Add a new script in the body bottom 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 = 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!

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

Was this article helpful?

Can’t find what you need?

Let us help you!
Send us a message
We are using cookies for analytical purpose. Learn more.