I am incorporating your Layer Slider in an Angular 7 component.
My first try was to hardcode the HTML in the component's HTML template and instantiate the Layer Slider when the component is ready to display. This works perfectly.
I then attempted to pass an array of slide descriptions to the component and used the Angular techniques so that Angular create the HTML during its compilation step.
I could not make this work.
My next attempt was to generate the correct HTML in javascript and update the DOM using the Angular directive innerHTML.
This worked perfectly (requiring a few tweaks).
However, I have a requirement that the slide background images be optimized and resized dynamically according to the size of the browser window.
I tried to use the HTML element <picture> but it seems that the Layer Slider does not support it. This would have been a perfect solution: using media queries to instruct the browser which image to load according to size.
I then tried to destroy the Layer Slider, after a resize, wait for completion, programmatically update the DOM (innerHTML Angular binding) and reinitialize the Layer Slider. That does not work.
My question is: is it possible to dynamically change the underlaying HTML (add/remove and change slides) and have the Layer Slider adapt on the fly ?
Thank you for getting in touch with us. My name is Attila and I'm happy to assist you today.
I would like to confirm that we have received your message. Due to the nature of the issue you are experiencing, I will have to contact and consult with the development team first. I will get back to you as soon as I can.
We appreciate your patience while we're working towards your ticket.
At the moment you cannot change the slides' content while its playing, but we are planning to implement a function like this in the future releases. However you can destroy and then reinitialize a slider, as long as the markup fits the requirements, it doesn't matter how it was implemented. You can even load it dynamically with JavaScript, if it's not happening while the slider is active.
The picture element is not supported, but the default <img> element has the scrset and size attributes too. You can use those for the same effect.
I tried using the <img> tag with srcset and it works very well. May I suggest that you indicate the possibility in your documentation for people like me who get used to using one tag and forget about the alternatives?
I am looking forward to the ability to change slides on the fly.
However, destroying and creating a new slider did not work in my Angular context. The HTML is correctly recreated by the slider but the images (or background) is blank. Deleting and recreating the Angular component itself works. I have not tried your debugging tools to see why the destroy/recreate action does not work. As far as I can see the HTML is identical.
Anyway, the <img> with srcset resolves my problem.
Hi,
I am incorporating your Layer Slider in an Angular 7 component.
My first try was to hardcode the HTML in the component's HTML template and instantiate the Layer Slider when the component is ready to display. This works perfectly.
I then attempted to pass an array of slide descriptions to the component and used the Angular techniques so that Angular create the HTML during its compilation step.
I could not make this work.
My next attempt was to generate the correct HTML in javascript and update the DOM using the Angular directive innerHTML.
This worked perfectly (requiring a few tweaks).
However, I have a requirement that the slide background images be optimized and resized dynamically according to the size of the browser window.
I tried to use the HTML element <picture> but it seems that the Layer Slider does not support it. This would have been a perfect solution: using media queries to instruct the browser which image to load according to size.
I then tried to destroy the Layer Slider, after a resize, wait for completion, programmatically update the DOM (innerHTML Angular binding) and reinitialize the Layer Slider. That does not work.
My question is: is it possible to dynamically change the underlaying HTML (add/remove and change slides) and have the Layer Slider adapt on the fly ?
Any idea would be welcome.
Thanks for your help
Philippe Moransais
Hello Philippe,
Thank you for getting in touch with us. My name is Attila and I'm happy to assist you today.
I would like to confirm that we have received your message. Due to the nature of the issue you are experiencing, I will have to contact and consult with the development team first. I will get back to you as soon as I can.
We appreciate your patience while we're working towards your ticket.
Thank you for your patience.
At the moment you cannot change the slides' content while its playing, but we are planning to implement a function like this in the future releases. However you can destroy and then reinitialize a slider, as long as the markup fits the requirements, it doesn't matter how it was implemented. You can even load it dynamically with JavaScript, if it's not happening while the slider is active.
The picture element is not supported, but the default <img> element has the scrset and size attributes too. You can use those for the same effect.
Hi Atilla,
Sorry for my late response.
I tried using the <img> tag with srcset and it works very well. May I suggest that you indicate the possibility in your documentation for people like me who get used to using one tag and forget about the alternatives?
I am looking forward to the ability to change slides on the fly.
However, destroying and creating a new slider did not work in my Angular context. The HTML is correctly recreated by the slider but the images (or background) is blank. Deleting and recreating the Angular component itself works. I have not tried your debugging tools to see why the destroy/recreate action does not work. As far as I can see the HTML is identical.
Anyway, the <img> with srcset resolves my problem.
I have to command your support! I am impressed.
Thank you
Thank you for the feedback, glad you could solve the problem.
If you need further assistance please let us know.