uikit / uikit

Here is a complete very minimized repro:

<html>
  <head>
    <script src="https://cdn.jsdelivr.net/npm/uikit@3.20.8/dist/js/uikit.min.js"></script>
  </head>

  <body>
    <div uk-slider="center: true">
      <ul class="uk-slider-items"><!-- issue happens when there are no <li>'s --></ul>
    </div>
  </body>
</html>

It gets into an infinite loop in

uikit/src/js/components/slider.js

Lines 230 to 236 in a82d76e

    
           while (width > 0) { 
        
               const slideIndex = this.getIndex(--j + index, index); 
        
               const slide = this.slides[slideIndex]; 
        
               css(slide, 'order', slideIndex > index ? -2 : -1); 
        
               width -= dimensions(slide).width; 
        
           }

Basically, slides is an empty list, slide is undefined, and dimensions(slide).width is 0. This causes width to never go down, hence the infinite loop.

In my real app, I have some <li> that are dynamically generated, so the problem happens when the DB data causes the <li> list to be empty.

Relates to OneZoom/OZtree#851

	while (width > 0) {
	const slideIndex = this.getIndex(--j + index, index);
	const slide = this.slides[slideIndex];

	css(slide, 'order', slideIndex > index ? -2 : -1);
	width -= dimensions(slide).width;
	}

uk-slider gets into an infinite loop if there are not <li> takes in a <ul>