Make sure to bind the sliderWillLoad event to the slider container element before initializing the slider.
Slides are no longer part of the live DOM, they are just used in the initial markup. After initialization, all layers are in the same containment element (.ls-layers) and the slider dynamically show or hide them as it progresses through your slides. You can use the API to track slide changes. Also, layers have data-* attributes to filter them based on which slide they animate in or out.
As mentioned, you need to bind the sliderWillLoad event before initializing the slider. At the moment, you call .layerSlider() first, then attach the event, which will not fire since it has been already triggered mid-initialization.
If you want to access to the original slider markup to read custom data-* attributes, there is a hidden copy prepended in <body> with the ".ls-hidden" class. You can track the slideshow progression and target the appropriate element with a custom selector.
It appears to be working for me, I can see the event firing in the JS console. However, this particular event occurs before processing any data, therefore it does not have a data object (i.e. the variable called "slider"). It is merely a notification providing you a last chance to perform any task (usually markup related) before the initialization. If you need to work with the slider data, you should use the sliderDidLoad event.
Okay...thanks...please add that info to the documentation ! ;o)
So...what event would i use in order to change the configuration/options...based on some condition ?
I need to skip some slides (youtube slides for example)...and maybe the first slide. That's why i want to set "firstSlide" option to 2. or 3. slide...or can you provide an alternative?
Is there a reason why you don't want to set the firstSlide option to a constant value? Using PHP or JS, you can manipulate the config object prior to initialization. If you want to override firstSlide based on some condition, I see no reason why you couldn't do that beforehand.
Using the slideChangeWillStart event, you can divert the slider and switch to any slide you would like. See the docs for more information.
What i'm trying to achieve is skipping slides based on type - that's why i asked if i could access data attributes and then skip them based on type. It's mainly streaming slides like youtube, vimeo etc. that requires to be online.
But i found that i can change it before the slides actually starts to run - so it solves my thing with the firstSlide option ! ;o)
Now i just need to calculate the next slide ! ;o)
By the way...i can see that i can set the volume now - it seem to work fine with youtube...but not on Html5 video - is there another way to adjust the volume there?
And you can also change slides on-the-fly with the slideChangeWillStart event. It has a data object with all the relevant information (including the proposed next slide index) and you can instruct the slider to change to whichever slide you would like.
The volume setting should be working on all supported players, including HTML5. We will look into that and fix any issue we may find. Thank you for letting us know!
Hi there
I'm working with the LayerSlider API and can't get "sliderWillLoad" to fire - nothing happends ?
Is there an easy way to get access to the DOM of a slide - i need to access a "data" attribute ! ;o)
Can you help ?
Thanks
Hey Thorendahl,
Make sure to bind the sliderWillLoad event to the slider container element before initializing the slider.
Slides are no longer part of the live DOM, they are just used in the initial markup. After initialization, all layers are in the same containment element (.ls-layers) and the slider dynamically show or hide them as it progresses through your slides. You can use the API to track slide changes. Also, layers have data-* attributes to filter them based on which slide they animate in or out.
Please look at the link i send with the ticket...
As mentioned, you need to bind the sliderWillLoad event before initializing the slider. At the moment, you call .layerSlider() first, then attach the event, which will not fire since it has been already triggered mid-initialization.
If you want to access to the original slider markup to read custom data-* attributes, there is a hidden copy prepended in <body> with the ".ls-hidden" class. You can track the slideshow progression and target the appropriate element with a custom selector.
I've tried your suggestion and bind the events to the container first, but i still can't get it to work ! ;o(
Please provide and example, so i can understand how to do it ! :o)
I've updated my example: http://atn.dk/layerslider_6/
Thanks for the tip with the hidden area ! ;o)
It appears to be working for me, I can see the event firing in the JS console. However, this particular event occurs before processing any data, therefore it does not have a data object (i.e. the variable called "slider"). It is merely a notification providing you a last chance to perform any task (usually markup related) before the initialization. If you need to work with the slider data, you should use the sliderDidLoad event.
Okay...thanks...please add that info to the documentation ! ;o)
So...what event would i use in order to change the configuration/options...based on some condition ?
I need to skip some slides (youtube slides for example)...and maybe the first slide. That's why i want to set "firstSlide" option to 2. or 3. slide...or can you provide an alternative?
Thanks ! ;o)
Hi Thorendahl,
I'm John from the Kreatura Dev Team.
Is there a reason why you don't want to set the firstSlide option to a constant value? Using PHP or JS, you can manipulate the config object prior to initialization. If you want to override firstSlide based on some condition, I see no reason why you couldn't do that beforehand.
Using the slideChangeWillStart event, you can divert the slider and switch to any slide you would like. See the docs for more information.
Best Regards,
John | Kreatura Dev Team
Hi John
What i'm trying to achieve is skipping slides based on type - that's why i asked if i could access data attributes and then skip them based on type. It's mainly streaming slides like youtube, vimeo etc. that requires to be online.
But i found that i can change it before the slides actually starts to run - so it solves my thing with the firstSlide option ! ;o)
Now i just need to calculate the next slide ! ;o)
By the way...i can see that i can set the volume now - it seem to work fine with youtube...but not on Html5 video - is there another way to adjust the volume there?
Thanks ! ;o)
And you can also change slides on-the-fly with the slideChangeWillStart event. It has a data object with all the relevant information (including the proposed next slide index) and you can instruct the slider to change to whichever slide you would like.
The volume setting should be working on all supported players, including HTML5. We will look into that and fix any issue we may find. Thank you for letting us know!
Best Regards,
John | Kreatura Dev Team
Thanks for the support - I think i have what i need for now, so you can close the ticket ! ,o)
If i need more help i'll submit a new ticket ! ;o)
Best from
Thorendahl