How to use multiple instances of Glider.js slider (page not loading properly)

I must be doing something wrong because with two instances of the slider it causes the page not to finish loading in google chrome mobile and causes the browser to crash when resizing the page with the inspector opened, as wel as not loading page speed results I’m using glider.js (Glider.js - A fast, lightweight carousel alternative)

This is my code structure for the first slider instance

<div class="glider-contain">
  				<div id="glider-testimonios" class="glider zpb-4">
      	 
                              
                  <div class="card mx-3 custom-mb-card-servicios">
                  		                  		
				            <img class="card-img-top lazyload" data-srcset="<?php echo $image2xretina[0]; ?>" alt="<?php the_title(); ?>">
         			
                  		<?php } ?>	              
                      <div class="card-body bg-transparent p-0">
                      <div class="cuerpo-testimonio mt-4 px-4 bg-white text-center">
                        <p class="text-center"><?php the_field('mensaje_testimonio'); ?></p>
                        <p class="text-center"><?php the_field('nombre_de_la_persona'); ?></p>
                      </div>
                                                                        
                      </div>
                    </div>           
          	</div>
          	<button aria-label="Previous" id="glider-prev-testimonios" class="glider-prev">
	          	<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
	          	<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" /></svg>
          	</button>
		  	<button aria-label="Next" id="glider-next-testimonios" class="glider-next">
		  		<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
  				<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
				</svg>
			</button>
		  <div class="glider-dots-testimonios" role="tablist" id="dots-testimonios"></div>
		</div>
        </div>
        </div>

and for the second slider:

<div class="glider-contain">
        <div id="glider-single" class="glider">
            
            <div class="d-flex align-items-center item-medios">
              <a rel="noopener" aria-label="<?php the_title(); ?>">              
                <img class="thumbnail lazyload" srcset="<?php echo $imagen_medios[0]; ?>" alt="<?php the_title(); ?>">
              </a>
            </div>          
        </div>
        <button aria-label="Previous" id="glider-prev-medios" class="glider-prev glider-prevv2">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
            </svg>
         </button>
      <button aria-label="Next" id="glider-next-medios" class="glider-next glider-nextv2">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
      </svg>
    </button>
        <div class="dots dots-medios" id="dots-medios"></div>
    </div>
          
      </div>
    </div>

This is my script code:

<script defer type="text/javascript">

 window.addEventListener('load', function(){
            new Glider(document.getElementById('glider-testimonios'), {
            slidesToShow: 1, //'auto',
            slidesToScroll: 1,
            itemWidth: 'auto',
            draggable: true,
            scrollLock: false,            
            dots: '#dots-testimonios',
            rewind: true,
            arrows: {
                prev: '#glider-prev-testimonios',
                next: '#glider-next-testimonios'
            },
            responsive: [

    {
      // screens greater than >= 775px
      breakpoint: 483,
      settings: {
        // Set to `auto` and provide item width to adjust to viewport
        slidesToShow: 1,
        rewind: true,
        slidesToScroll: 1,
        itemWidth: 482,        
        duration: 0.25,
        exactWidth: true
      }
      },
    {
      // screens greater than >= 775px
      breakpoint: 974,
      settings: {
        // Set to `auto` and provide item width to adjust to viewport
        slidesToShow: 2,
        rewind: true,
        slidesToScroll: 2,
        itemWidth: 482,        
        duration: 0.25,
        exactWidth: true
      }
      },{
      // screens greater than >= 1024px
      breakpoint: 1488,
      settings: {
        slidesToShow: 3,
        rewind: true,
        slidesToScroll: 3,
        itemWidth: 482,
        duration: 0.25,
        exactWidth: true
        

    }
    }
  ]
        });
      });

/* segunda instancia para slider medios */

 window.addEventListener('load', function(){
            new Glider(document.getElementById('glider-single'), {
            slidesToShow: 'auto', //'auto',
            slidesToScroll: 'auto',
            exactWidth: false,
            itemWidth: 220,
            draggable: true,
            scrollLock: false,
            dots: '#dots-medios',
            rewind: true,
            resizeLock: false,
            arrows: {
                prev: '#glider-prev-medios',
                next: '#glider-next-medios'
            },
            responsive: [
                {
                    breakpoint: 530,
                    settings: {
                        slidesToScroll: 'auto',
                        itemWidth: 180,
                        slidesToShow: 'auto',
                        exactWidth: false,
                        resizeLock: false
                    }
                },
                {
                    breakpoint: 800,
                    settings: {
                        slidesToScroll: 'auto',
                        itemWidth: 280,
                        slidesToShow: 'auto',
                        exactWidth: false,
                        resizeLock: false
                    }
                }              
                
            ]
        });
      });
          

</script>

I found this glider-procedural-multiple-init - CodeSandbox which I’m trying to adapt to my code, worst case I just use the same approach “for each” which does work on the above code link… I also noticed that here there (Glider.js - A fast, lightweight carousel alternative) are multiple slider instances of example , tried to replicate their code scripts but is not properly working though.

Edit: it can be debugged here as it is live: institutocalma.org/
I’m out of ideas really, and the above sandbox code, uses the same settings for the most part of the methods, which is not what I need. Why does it work in Chrome desktop and not in Chrome mobile?