Limited availability during the holidays
Another busy year is coming to its end, and an exciting year lies ahead. In order to get ready for a fresh new start, our team will spend a few days' rest during the winter holidays. Over the holiday break, we will have reduced staffing from December 20th, 2024, to January 5th, 2025, so please be patient if you do not receive a response as quickly as you normally would.
We send our warmest wishes for happiness, health, and success throughout the coming year. Thank you for your continued support, and may you have a peaceful and blessed Happy Holidays!
Could you give me a simple example for initialing layerSlider and creating html elements from a json file?
cheers
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.
I had a look, but i don't seem able to initialise layerSlider from jsonLOAD success callback, any pointers? thanks
$(document).ready(function () {
$.ajax({
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;"
});
$(img).appendTo(divls);
$(divSub).appendTo(divls);
$(divls).appendTo(div);
$(div).appendTo('body');
//
//
divls.layerSlider({
sliderVersion: '6.5.0b1',
type: 'fullsize',
allowFullscreen: false,
maxRatio: 1,
hideUnder: 567,
skin: 'v6',
showCircleTimer: false,
skinsPath: 'layerslider/skins/',
height: 720
});
//
});////EACH FUNCTION END
//
};//INIT DATA FUNCTION END
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.
Hi,
I found the error, i was initialising the slider on the child div instead of the container div..
Thanks anyway :)
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.
Yup thanks, I was calling the layerSlider( ) method on the wrong element :-|
Cheers