How to redraw slider (in modal) set to hidden

Design help General
1

Hello, I’m using the Beer Slider found in Flowbase inside of a HIDDEN modal and I believe I need to add a redraw or a way for the script to start after the modal is opened. The script is below but not exactly sure how and where to add it.

<script src="https://unpkg.com/beerslider/dist/BeerSlider.js"></script>

<script>
  // Wait for the page to load
  $(document).ready(function () {
    // Select all elements with the class "image-wrapper" and loop through them
    const imageWrappers = document.getElementsByClassName("image-wrapper");
    for(const imageWrapper of imageWrappers){
      // Get the source of the first and second image within the current "image-wrapper" element
      const firstImage = imageWrapper.querySelectorAll('img')[0].src;
      const secondImage = imageWrapper.querySelectorAll('img')[1].src;
      // Create a template for the beer slider using the first and second image sources
      const template = `
        <div class="beer-slider" data-beer-label="before">
          <img src="${firstImage}">
          <div class="beer-reveal" data-beer-label="after">
            <img src="${secondImage}">
          </div>
        </div>
      `;
      // Remove the first and second images
      imageWrapper.querySelectorAll('img')[1].remove();
      imageWrapper.querySelectorAll('img')[0].remove();
      // Append the template to the current "image-wrapper" element
      imageWrapper.insertAdjacentHTML('afterbegin',template);
    }
      
    // Select all elements with the class "beer-slider" and loop through them
    const beerSliders = document.getElementsByClassName("beer-slider");
    for(const beerSlider of beerSliders){
      // Initialize the BeerSlider plugin on the current element, passing in the "start" data attribute as the option
      new BeerSlider(beerSlider, { start: beerSlider.dataset.start });
    }
  });

</script>


<style>
  .beer-slider {
    height: 100% !important;
  }

  .beer-slider,
  .beer-slider>img {
    width: 100% !important;
  }
  
  .beer-range::-webkit-slider-thumb {
    -webkit-appearance: auto;
  }
</style>
2

Got it with some chatgpt assistance.

<script src="https://unpkg.com/beerslider/dist/BeerSlider.js"></script>

<script>
  function initializeBeerSlider(wrapperId) {
    const modalWrapper = document.getElementById(wrapperId);
    const imageWrappers = modalWrapper.getElementsByClassName("image-wrapper");
    for (const imageWrapper of imageWrappers) {
      const firstImage = imageWrapper.querySelectorAll('img')[0].src;
      const secondImage = imageWrapper.querySelectorAll('img')[1].src;
      const template = `
        <div class="beer-slider" data-beer-label="before">
          <img src="${firstImage}">
          <div class="beer-reveal" data-beer-label="after">
            <img src="${secondImage}">
          </div>
        </div>
      `;
      imageWrapper.querySelectorAll('img')[1].remove();
      imageWrapper.querySelectorAll('img')[0].remove();
      imageWrapper.insertAdjacentHTML('afterbegin', template);
    }
    const beerSliders = modalWrapper.getElementsByClassName("beer-slider");
    for (const beerSlider of beerSliders) {
      new BeerSlider(beerSlider, { start: beerSlider.dataset.start });
    }
  }

  function observeModalChanges(wrapperId) {
    const modalWrapper = document.getElementById(wrapperId);
    if (modalWrapper) {
      const observer = new MutationObserver((mutationsList, observer) => {
        for (const mutation of mutationsList) {
          if (mutation.type === 'attributes' && mutation.attributeName === 'style') {
            if (modalWrapper.style.display !== 'none') {
              initializeBeerSlider(wrapperId);
            }
          }
        }
      });

      observer.observe(modalWrapper, { attributes: true });
    }
  }

  $(document).ready(function () {
    observeModalChanges('modal-wrapper');
    observeModalChanges('modal-wrapper-2');
  });
</script>

<style>
  .beer-slider {
    height: 100% !important;
  }

  .beer-slider,
  .beer-slider > img {
    width: 100% !important;
  }
  
  .beer-range::-webkit-slider-thumb {
    -webkit-appearance: auto;
  }
</style>
1 Like