Public Ticket #1963158


  • raul started the conversation

    Could you give me a simple example for initialing layerSlider and creating html elements from a json file?


  • [deleted] replied

    Hello Raul,

    Thank you for getting in touch with us. My name is Attila and I'm happy to assist you today. I appreciate your patience while we've been working towards your ticket.

    The documentation contains code examples for this that you can use, as well as descriptions on the options, loading plugin files and initialization. You can find the documentation in the plugin's package that you download from CodeCanyon. Please refer to the related section of it.

  • raul replied

    I had a look, but i don't seem able to initialise layerSlider from jsonLOAD success callback, any pointers? thanks

    $(document).ready(function () {
    type: "GET",
    url: "data.json",
    dataType: "json",
            mimeType: "application/json",
    success: init
    ///////////////////////////////////// INIT

    function init(data) {
    //var pageSlider_postActive=0;

    console.log ("Json file succesful");
    $.each(data.works, function(i, item) {
            var div = $('<div />', {
                "id": "slider5",
                "style": "width:1280px;height:100vh;margin:0 auto;margin-bottom: 0px;"
            var divls = $('<div />', {
                "id": data.works[i].id,
                "class": data.works[i].class,
                "data-ls":"kenburnsscale:1.2; parallaxevent:scroll; parallaxdurationmove:500;"
            var img = $('<img />', {
                "class": "ls-l",
                "src": data.works[i].image,
                "width": "1620",
                "height": "1080",
                "style": "top:0px; left:87%; text-align:initial; font-weight:400; font-style:normal; text-decoration:none; height:100%;",
                "data-ls": "showinfo:1; durationin:300; delayin:300; loop:true; loopoffsetx:-10sw; loopduration:2000; loopstartat:transitioninstart - 300; loopeasing:easeOutQuint; loopcount:1; position:fixed;"
            var divSub = $('<div />', {
                "style": "background: rgb(120,59,177); background: -moz-linear-gradient(top, rgba(120,59,177,1) 0%, rgba(71,47,173,1) 100%); background: -webkit-linear-gradient(top, rgba(120,59,177,1) 0%,rgba(71,47,173,1) 100%); background: linear-gradient(to bottom, rgba(120,59,177,1) 0%,rgba(71,47,173,1) 100%); ;left:0px; text-align:initial; font-weight:400; font-style:normal; text-decoration:none; height:100%; width:100%; top:0px; font-size:14px;",
                "class": "ls-l",
                "data-ls": "showinfo:1; offsetxin:right; easingin:easeOutQuint; fadein:false; scalexin:0; loop:true; loopduration:1200; loopstartat:transitioninstart + 400; loopeasing:easeOutExpo; loopscalex:0.6; looptransformorigin:0% 50% 0; loopcount:1; position:fixed;"
                    sliderVersion: '6.5.0b1',
                    type: 'fullsize',
                    allowFullscreen: false,
                    maxRatio: 1,
                    hideUnder: 567,
                    skin: 'v6',
                    showCircleTimer: false,
                    skinsPath: 'layerslider/skins/',
                    height: 720

  • [deleted] replied

    Thank you for the feedback. My colleagues and I will take a look at this to see what might be wrong, and get back to you shortly.

  • raul replied


    I found the error, i was initialising the slider on the child div instead of the container div..

    Thanks anyway :)

  • [deleted] replied

    Thank you for the feedback, glad you could solve the problem. 

    We've also noticed that, in the divls.layerSlider({" code part, you should not use the "divls" variable, but just the "div" named instead. Please also make sure that the class names have the necessary tags. "ls-slide"for slides and "ls-layer" for layers.

    If you need further assistance please let us know, and show us your site where we can see the generated markup. We will be able to troubleshoot better that way. Thank you.

  • raul replied

    Yup thanks, I was calling the layerSlider( ) method on the wrong element :-|