This method will allow you to add one slider to particular landing page by adding a javascript code and additional HTML. For alternative method, check another type of slider.

NOTE: 💡
If you are planning more than one slider on a single landing page,
try alternative type of slider.

How this slider works?

Running this slider on a landing page requires adding a short script in the "javascript codes" tab and the appropriate number of <div> html tags </ div>, using the "Custom HTML" element when editing the landing page. 

How to add this type of slider to your landing page?

1. Go to the main view in the Landingi application, and then enter the Dashboard -> Javascript codes of the selected landing. Add a new js code in the Body bottom section and save the changes:

<script src="https://s3.eu-central-1.amazonaws.com/scripts.assets-landingi.com/customer-success/Lean_slider/lean-slider.js"></script>
<link rel="stylesheet" href="https://s3.eu-central-1.amazonaws.com/scripts.assets-landingi.com/customer-success/Lean_slider/lean-slider.css" type="text/css"/>
<link rel="stylesheet" href="https://s3.eu-central-1.amazonaws.com/scripts.assets-landingi.com/customer-success/Lean_slider/sample-styles.css" type="text/css"/>
    <script type="text/javascript">
    $(document).ready(function() {
        var slider = $('#slider').leanSlider({
            directionNav: '#slider-direction-nav',
            controlNav: '#slider-control-nav'
        });
    });
    </script>

2. Once it is done, enter the editor, select the section where the slider should be placed, add an HTML widget there and paste the code below.

NOTE : 🔥
The value given as src = ""  is an example only. At this point, provide actual hyperlinks to your image file that you want to put in the slide.

Remember to assign consecutive numbers at the end of the class parameter of each slide. Do not change any of the other class parameters.

<div class="slider-wrapper">
    <div id="slider">
<div class="slide1">
<img src="http://location/img/picture1.jpg" alt="" />
</div>
<div class="slide2">
                 <img src="http://location/img/picture2.jpg" alt="" />
</div>
<div class="slide3">
        <img src="http://location/img/picture3.jpg" alt="" />
</div>
<div class="slide4">
<img src="http://location/img/picture4.jpg" alt="" />
</div>
    </div>
    <div id="slider-direction-nav"></div>
    <div id="slider-control-nav"></div>
    </div>

TIP: 💡
It is a good practice to add the "alt" parameter, which contains the text that will be displayed if for some reason the user's browser does not read the picture from the slide. It is a good idea to put a word or words here that clearly describe what the image contains – also for SEO purposes. Proper use of the alt parameters can also have a positive influence on the positioning of the page by the Google search engine.

If you want to use images that have been previously uploaded to your Landing account via editor, you can easily get links to them. To do this, open the uploaded image gallery, right-click on the image and select "Explore item" (This action looks identical in both Chrome and Firefox). In developer tools that will open then, you can read and copy the link to the location of the file:

The number of div elements depends on how many elements your slider should have since each div should contain a link to one image file.

Elements with id "slider-direction-nav" and "slider-control-nav" are required for proper display and operation of arrows and dots for switching slides. Without these elements, the slider will still work, but you will not be able to manually switch between slides.

Additional parameters

By default, slides automatically switch images at low intervals of time and do not require any additional settings to function properly. However, it is possible to use additional parameters that will affect operating of the slider.

These parameters should be added in the javascript codes tab, within the function responsible for launching the slide:

$(document).ready(function() {
        var slider = $('#slider').leanSlider({
            directionNav: '#slider-direction-nav',
            controlNav: '#slider-control-nav',
            add more parameters here
        });

All parameters should be separated by commas. There is no need to place them vertically, one by one, but such code is easy to analyze, which may be important, for example, when using Landingi support.

  • PauseTime: 1000 - sets the time before the next slide switches. Time is given in milliseconds, so 1000 is equivalent to 1 second;
  • PauseOnHover: true - when you hover over the slide, it stops working, allowing you to get a glimpse of each of its elements. Moving the cursor outside of the slide area resumes the switching of its elements;
  • StartSlide: 0 - sets which slide will be displayed first. By default, this is the first div that contains the slide, but you can also change this order here. Remember that 0 means the first slide, so 1 is the second slide, and so on.

Elements other than graphics files

In addition to the images, other elements (tags) can also be placed in div slider elements, but this can cause undesirable changes in the behavior and appearance of the slider. Inserting other elements without having at least basic HTML knowledge is not recommended. We strongly recommend that you only place graphics files in the slide.

Picture Descriptions

Each graphic file can be further described so that, for example, some text is displayed at the bottom of the slide. Text can be placed in e.g. <p> tag (1 -6) or in <div>. You can use HTML formatting tags. Feel free to experiment :)

Creators:
The slider was prepared and made available by the gilbitron as "Lean Slider". Original documentation and a link to full code can be found here.

Did this answer your question?