Add a before/after slider to lightGallery

Using lightGallery and would like to implement one inline gallery with a before/after slider on each image.
Both are working fine using them independently: BeerSlider and lightGallery.

Is there somebody wo got this working?
I tried several ways already without success.
One of my attempt was to add the BeerSlider classes as a caption and append them to the lg-item element:

  // photo before after
  const beforeAfterContainer = document.getElementById("before-after");
  const beforeAfterInlineGallery = lightGallery(beforeAfterContainer, {
    container: beforeAfterContainer,
    dynamic: true,
    appendSubHtmlTo: ".lg-inner",
    dynamicEl: [
      {
        src: "https://loremflickr.com/640/480?random=1",
        thumb: "https://loremflickr.com/320/240?random=1",
        subHtml: `<div id="beer-slider" class="beer-slider" data-beer-label="before" data-beer-start="50">
            <img src="https://loremflickr.com/640/480?random=1" />
            <div class="beer-reveal" data-beer-label="after">
                <img src="https://loremflickr.com/640/480?random=2" />
            </div>
                </div>`,
      }
     //....
    ],
  });
  beforeAfterInlineGallery.openGallery();

  $("#beer-slider").each(function (index, el) {
    $(el).BeerSlider({ start: $(el).data("beer-start") });
  });

Thats not working at all. Additionally I tried to use the lightGallery selector to get the Beer Slider reveal image ignored by lightGallery. But this is not working at all, as one instance destroys the others (as far as I understand those scripts correctly).

Any ideas how to get both working together?
I really don’t need to use BeerSlider – if somebody got any other before/after plugin working with lightGallery I can switch to it.

Thanks Guys!