search

sneas / img-comparison-slider

Image comparison slider. Compare images before and after. Supports React, Vue, Angular.
https://img-comparison-slider.sneas.io
MIT License
657 stars 47 forks source link

Is it possible to refresh the slider after initial page load? #140

Closed mably closed 6 months ago

mably commented 6 months ago

In our case we are trying to inject the <img-comparison-slider> element dynamically into the page DOM via Ajax.

Thanks for your help.

sneas commented 6 months ago

Can you please elaborate on the "refresh" part? It would help me if you could describe the problem you are facing.

mably commented 6 months ago

Thanks for your quick answer.

Practically, some Ajax command is trying to render my <img-comparison-slider> template code into a CKEditor 5 instance.

The correct HTML is injected into the page but not rendered properly as I guess ICS is only doing its things on page load.

I would like to be able to redo it after that Ajax command is executed.

For the context, I'm working on an ICS module for Drupal: https://www.drupal.org/project/ics

sneas commented 6 months ago

Hence, it's a web component that should work for any newly injected <img-comparison-slider> tag. As soon as you have the necessary JS included. If it is not happening, there might be a bug. Before assuming it's a bug, can you ensure you have the needed JS on the page?

mably commented 6 months ago

Indeed, I will check that, thanks for your help.

mably commented 6 months ago

You were right, Image Comparison Slider javascript was not loaded.

Here is the related Drupal issue for those interested: https://www.drupal.org/project/drupal/issues/3072317