Multiple image sliders

Last updated: April 6, 2022 Written by: Teresa
Table of contents show hide
    Table of contents show hide

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

      new section slider class

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

      landingi icon widget

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

      slider arrows

      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.

      add java from 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>

      sliders landing page

      3. Click Add to save the code.

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

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

      Was this manual helpful?