Description and use
Running this slide 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.

The following code should be pasted into the "javascript codes":

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

Once it is done, enter the editor, select the section where the slider should be placed and add an HTML element to it. In this element type (the code according to the following pattern.

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>

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. 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 an 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 script code, 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?